Comment modifier les propriétés, les classes et les styles dans le DOM

Récupérez l'élément DOM à modifier via jQuery, puis modifiez les attributs, les classes et les styles via les méthodes JavaScript

Aujourd'hui sur cet article Je vais expliquer comment modifier davantage le dom en modifiant le style, la classe et les attributs du nœud de l'élément HTML. Il a une certaine valeur de référence et j'espère que cela sera utile à tout le monde.

[Cours recommandés : Tutoriel JavaScript, Tutoriel jQuery]

Trouvez l'élément que vous souhaitez sélectionner

Nous pouvons sélectionner et modifier des éléments dans le DOM via jQuery. jQuery simplifie le processus de sélection d'un ou plusieurs éléments et d'application simultanée de modifications à tous les éléments

Parmi eux, document.querySelector() et document.getElementById() sont les méthodes utilisées pour accéder aux éléments individuels.

Exemple :

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

Rendu :

En accédant à un seul élément, on peut modifier le contenu du texte

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

Rendu :

Modifier les attributs

Les attributs sont des valeurs qui contiennent des informations supplémentaires sur un élément HTML. Ils se composent généralement d’un nom/valeur, en fonction de l’élément.

En JavaScript, nous avons quatre façons de modifier les attributs d'un élément :

element.hasAttribute('href'); );

Méthode

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

Description

Exemple

hasAttribute()

Renvoie une valeur booléenne vraie ou fausse

getAttribute()

Retour la valeur de l'attribut spécifié ou null

element.getAttribute('href'

setAttribute()

Ajouter ou mettre à jour la valeur de l'attribut spécifié

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

removeAttribute()

Supprimer les attributs des éléments

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");
}

效果图：

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!