Heim Web-Frontend js-Tutorial javascript学习笔记(二十) 获得和设置元素的特性(属性)_基础知识

javascript学习笔记(二十) 获得和设置元素的特性(属性)_基础知识

May 16, 2016 pm 05:52 PM
元素 特性

本节html以下面的为例

复制代码 代码如下:

1.通过HTMLElement类型(对象)的属性获得和设置元素特性
复制代码 代码如下:

var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//取得元素特性
alert(div.id); //"myDiv"
alert(div.className); //"bd",这里不是div.class,是因为class是保留关键字
alert(div.title); //"我是div"
alert(a.href); //http://www.baidu.com
//设置元素特性
div.id = "myDiv2"; //id改为"myDiv2"
div.className = "ft"; //class改为"ft",如果存在名为"ft"的样式,会立刻变为"ft"样式,浏览器会立刻反应出来
div.title = "我是myDiv2"; //title改为"我是myDiv2"
div.align = "center"; //设置居中对齐
img.src ="images/img1.gif"; //设置图片路径
a.innerHTML ="新浪"; //"百度"改为"新浪"
a.href = "http://www.sina.com.cn"; //重新设置超链接

2.通过getAttribute()、setAttribute()和removeAttribute() 方法,获取、设置、移除元素的特性(不推荐使用,前两个方法IE6,7中有异常,第三个方法IE6不支持,设置自定义特性时可以使用)
getAttribute() 方法,用来获取元素特性。接受一个参数,即要获得元素的特性名
setAttribute() 方法,用来设置元素特性。接受两个参数,即要获得元素的特性名和特性值
removeAttribute() 方法,用来移除元素的特性。接受一个参数,即要移除元素的特性名
复制代码 代码如下:

var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//取得元素特性
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd",注意这里是class,而不是className,与上面不同
alert(div.getAttribute("title")); //"我是div"
alert(a.getAttribute("href")); //http://www.baidu.com
//设置元素特性
div.setAttribute("id","myDiv2"); //id改为"myDiv2"
div.setAttribute("class","ft"); //class改为"ft",这里同样是class,而不是className
div.setAttribute("title","我是myDiv2"); //title改为"我是myDiv2"
div.setAttribute("align","center"); //设置居中对齐
img.setAttribute("src","images/img1.gif"); //设置图片路径
//移除元素特性
div.removeAttribute("class"); //移除class特性

3.通过attributes属性,获取、设置、移除元素的特性
复制代码 代码如下:

var div = document.getElementById("myDiv");
//取得元素特性
alert(div.attributes["id"].nodeValue); //"myDiv"
//设置元素特性
div.attributes["id"].nodeValue = "myDiv2"; //id改为"myDiv2"
//移除元素特性
div.attributes.removeNamedItem("class"); //移除class特性
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Beherrschen Sie die Schlüsselkonzepte von Spring MVC: Verstehen Sie diese wichtigen Funktionen Beherrschen Sie die Schlüsselkonzepte von Spring MVC: Verstehen Sie diese wichtigen Funktionen Dec 29, 2023 am 09:14 AM

Verstehen Sie die Hauptfunktionen von SpringMVC: Um diese wichtigen Konzepte zu beherrschen, sind spezifische Codebeispiele erforderlich. SpringMVC ist ein Java-basiertes Framework für die Entwicklung von Webanwendungen, das Entwicklern beim Aufbau flexibler und skalierbarer Strukturen durch das Architekturmuster Model-View-Controller (MVC) hilft. Internetanwendung. Wenn wir die wichtigsten Funktionen von SpringMVC verstehen und beherrschen, können wir unsere Webanwendungen effizienter entwickeln und verwalten. In diesem Artikel werden einige wichtige Konzepte von SpringMVC vorgestellt

Wählen Sie je nach Bedarf und Funktionen die passende Go-Version Wählen Sie je nach Bedarf und Funktionen die passende Go-Version Jan 20, 2024 am 09:28 AM

Mit der rasanten Entwicklung des Internets werden Programmiersprachen ständig weiterentwickelt und aktualisiert. Unter ihnen hat die Go-Sprache als Open-Source-Programmiersprache in den letzten Jahren große Aufmerksamkeit erregt. Die Go-Sprache ist so konzipiert, dass sie einfach, effizient, sicher und leicht zu entwickeln und bereitzustellen ist. Es zeichnet sich durch hohe Parallelität, schnelle Kompilierung und Speichersicherheit aus und wird daher häufig in Bereichen wie Webentwicklung, Cloud Computing und Big Data eingesetzt. Derzeit sind jedoch verschiedene Versionen der Go-Sprache verfügbar. Bei der Auswahl einer geeigneten Go-Sprachversion müssen wir sowohl Anforderungen als auch Funktionen berücksichtigen. Kopf

Gibt es in Golang klassenähnliche objektorientierte Funktionen? Gibt es in Golang klassenähnliche objektorientierte Funktionen? Mar 19, 2024 pm 02:51 PM

In Golang (Go-Sprache) gibt es kein Konzept einer Klasse im herkömmlichen Sinne, es stellt jedoch einen Datentyp namens Struktur bereit, durch den objektorientierte Funktionen ähnlich wie Klassen erreicht werden können. In diesem Artikel erklären wir, wie Strukturen zur Implementierung objektorientierter Funktionen verwendet werden, und stellen konkrete Codebeispiele bereit. Definition und Verwendung von Strukturen Werfen wir zunächst einen Blick auf die Definition und Verwendung von Strukturen. In Golang können Strukturen über das Schlüsselwort type definiert und dann bei Bedarf verwendet werden. Strukturen können Attribute enthalten

CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen Nov 21, 2023 pm 01:16 PM

CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen Einführung: Im Webdesign kann der dynamische Effekt von Elementen das Benutzererlebnis verbessern, wobei der Gleiteffekt ein häufiger und beliebter Übergangseffekt ist. Durch die Übergangseigenschaft von CSS können wir leicht den gleitenden Animationseffekt von Elementen erzielen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS-Übergangseigenschaften den Gleiteffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt, um den Lesern ein besseres Verständnis und eine bessere Anwendung zu ermöglichen. 1. Einführung in den CSS-Übergangsattributübergang CSS-Übergangsattributtra

CSS-Transformation: So erzielen Sie den Rotationseffekt von Elementen CSS-Transformation: So erzielen Sie den Rotationseffekt von Elementen Nov 21, 2023 pm 06:36 PM

CSS-Transformation: Um den Rotationseffekt von Elementen zu erzielen, sind spezifische Codebeispiele erforderlich. Im Webdesign sind Animationseffekte eine der wichtigen Möglichkeiten, die Benutzererfahrung zu verbessern und die Aufmerksamkeit des Benutzers zu erregen, und Rotationsanimationen sind eine der klassischeren Methoden. In CSS können Sie das Attribut „transform“ verwenden, um verschiedene Verformungseffekte von Elementen zu erzielen, einschließlich Rotation. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe der CSS-Transformation den Rotationseffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt. 1. Verwendung von CSSs „transf

So verwenden Sie CSS, um den Transparenzverlaufseffekt eines Elements zu erzielen So verwenden Sie CSS, um den Transparenzverlaufseffekt eines Elements zu erzielen Nov 21, 2023 pm 01:38 PM

So verwenden Sie CSS, um den Transparenzverlaufseffekt von Elementen zu erzielen. In der Webentwicklung ist das Hinzufügen von Übergangseffekten zu Webseitenelementen eines der wichtigen Mittel zur Verbesserung der Benutzererfahrung. Der Verlaufseffekt der Transparenz kann nicht nur die Seite glatter machen, sondern auch den Hauptinhalt des Elements hervorheben. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS den Transparenzgradienteneffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt. Verwenden des CSS-Übergangsattributs Um den Transparenzverlaufseffekt eines Elements zu erzielen, müssen wir das CSS-Übergangsattribut verwenden. T

Beherrschen Sie die wichtigsten Funktionen und Anwendungsszenarien der Golang-Middleware Beherrschen Sie die wichtigsten Funktionen und Anwendungsszenarien der Golang-Middleware Mar 20, 2024 pm 06:33 PM

Als schnelle und effiziente Programmiersprache wird Golang auch häufig im Bereich der Webentwicklung eingesetzt. Unter anderem kann Middleware als wichtiges Entwurfsmuster Entwicklern dabei helfen, Code besser zu organisieren und zu verwalten sowie die Wiederverwendbarkeit und Wartbarkeit von Code zu verbessern. In diesem Artikel werden die wichtigsten Funktionen und Anwendungsszenarien der Middleware in Golang vorgestellt und ihre Verwendung anhand spezifischer Codebeispiele veranschaulicht. 1. Das Konzept und die Funktion von Middleware. Als Plug-In-Komponente wird Middleware in der Anforderungs-Antwort-Verarbeitungskette der Anwendung eingesetzt

Ist die Go-Sprache mit C-Sprachfunktionen kompatibel? Ist die Go-Sprache mit C-Sprachfunktionen kompatibel? Mar 07, 2024 pm 03:24 PM

Die Go-Sprache ist eine von Google entwickelte Programmiersprache. Sie zeichnet sich durch Einfachheit, Effizienz und Parallelitätsunterstützung aus und hat nach und nach breite Aufmerksamkeit und Anwendung gefunden. In vielen Fällen müssen Entwickler möglicherweise mit der C-Sprache interagieren oder die Funktionen der C-Sprache nutzen. Zu diesem Zeitpunkt müssen sie prüfen, ob die Go-Sprache mit den Funktionen der C-Sprache kompatibel ist. In diesem Artikel wird die Kompatibilität zwischen der Go-Sprache und der C-Sprache vorgestellt und spezifische Codebeispiele bereitgestellt, um die Beziehung zwischen ihnen zu veranschaulichen. Funktionen der Go-Sprache Die Go-Sprache ist eine statisch typisierte, kompilierte und Parallelität unterstützende Programmiersprache.

See all articles