So ändern Sie Eigenschaften, Klassen und Stile im DOM

Rufen Sie das zu ändernde DOM-Element über jQuery ab und ändern Sie dann die Attribute, Klassen und Stile über JavaScript-Methoden

Heute wird dieser Artikel Teilen Sie mit, wie Sie den Dom weiter ändern können, indem Sie den Stil, die Klasse und die Attribute des HTML-Elementknotens ändern. Es hat einen bestimmten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

[Empfohlene Kurse: JavaScript-Tutorial, jQuery-Tutorial]

Suchen Sie das Element, das Sie auswählen möchten

Wir können Elemente im DOM über jQuery auswählen und ändern. jQuery vereinfacht den Prozess der Auswahl eines oder mehrerer Elemente und der gleichzeitigen Anwendung von Änderungen auf alle Elemente

Darunter sind document.querySelector() und document.getElementById() die Methoden, die für den Zugriff auf einzelne Elemente verwendet werden.

Beispiel:

function myFunction() {
    document.querySelector(".example").style.backgroundColor = "pink";
}

Rendering:

Durch den Zugriff auf ein einzelnes Element können wir den Inhalt des Textes ändern

 document.querySelector(".example").textContent="点击文本发生变化";

Rendering:

Attribute ändern

Attribute sind Werte, die zusätzliche Informationen zu einem HTML-Element enthalten. Sie bestehen in der Regel je nach Element aus Name/Wert.

In JavaScript haben wir vier Möglichkeiten, Elementattribute zu ändern:

element.hasAttribute('href');

Methode

方法	描述	例
hasAttribute()	返回一个true或false布尔值	element.hasAttribute('href');
getAttribute()	返回指定属性的值或 null	element.getAttribute('href');
setAttribute()	添加或更新指定属性的值	element.setAttribute('href', 'index.html');
removeAttribute()	从元素中删除属性	element.removeAttribute('href');

Beschreibung

Beispiel

hasAttribute()

Gibt einen wahren oder falschen booleschen Wert zurück

getAttribute()

Return der Wert des angegebenen Attributs oder null

element.getAttribute('href');

setAttribute()

Den Wert des angegebenen Attributs hinzufügen oder aktualisieren

element.setAttribute('href', 'index.html');

removeAttribute()

Attribute aus Elementen entfernen

element.removeAttribute('href');

function demo(){
	var img =document.getElementsByTagName("img")[0];
	img.setAttribute('src', 'images/2.jpg');
}

效果图：

修改类

CSS类用于将样式应用于多个元素，这与每页只能存在一次的ID不同。在JavaScript中，我们有className和classList属性来处理class属性。

方法/属性	描述	例
className	获取或设置类值	element.className;
classList.add()	添加一个或多个类值	element.classList.add('active');
classList.toggle()	在元素中切换类名	element.classList.toggle('active');
classList.contains()	检查类值是否存在	element.classList.contains('active');
classList.replace()	用新的类值替换现有的类值	element.classList.replace('old', 'new');
classList.remove()	删除类值	element.classList.remove('active');

例：

.demo1{
			width:100px;
			height:100px;
			background-color: pink;
		}
		.demo2{
			width:200px;
			height:200px;
			background-color:skyblue;
		}
function demo(){
	var p =document.getElementsByTagName("p")[0];
	p.classList.toggle("demo2");
}

效果图：

总结：以上就是本篇文章的全部内容了，希望对大家有所帮助。

Das obige ist der detaillierte Inhalt vonSo ändern Sie Eigenschaften, Klassen und Stile im DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!