Comment Javascript appelle-t-il CSS

Avec le développement rapide de la technologie Internet, JavaScript, en tant que langage de script largement utilisé, est souvent utilisé pour l'interaction des pages Web et l'affichage d'effets dynamiques. CSS (Cascading Style Sheets) est un langage utilisé pour décrire le style et l'apparence des documents HTML. Il peut améliorer la mise en page et l'apparence des pages Web. Par conséquent, l’utilisation combinée de JavaScript et CSS nous permet d’obtenir des effets plus flexibles et plus diversifiés dans la conception et le développement Web. Cet article se concentrera sur la façon dont JavaScript appelle CSS pour vous aider à mieux utiliser ces deux langages.

Comment JavaScript appelle CSS

1. Obtenez l'objet élément via getElementById(), puis changez le style CSS en modifiant l'attribut style de l'objet élément

Il existe une méthode très importante en JavaScript, getElementById(), qui peut être obtenu en spécifiant l'attribut id Un objet élément spécifique sur la page. Nous pouvons utiliser cette méthode pour obtenir l'objet élément spécifique dont le style doit être modifié, puis utiliser l'attribut style de l'objet élément pour changer le style de l'élément.

Par exemple, nous pouvons changer la taille de la police de l'élément avec l'identifiant "text" via le code suivant :

document.getElementById("text").style.fontSize="20px";

2. Utilisez la méthode setAttribute() pour modifier l'attribut de classe de l'objet élément

En plus de en changeant le style de l'élément via la méthode getElementById(), nous pouvons également modifier l'attribut de classe de l'objet élément via la méthode setAttribute(). L'utilisation de l'attribut class permet à plusieurs éléments de partager le même style, réduisant ainsi le code en double.

Par exemple, nous pouvons modifier la valeur de l'attribut de classe de l'élément avec l'identifiant "text" pour "changer" via le code suivant :

document.getElementById("text").setAttribute("class","change");

3. Utilisez la méthode getElementsByTagName() pour obtenir un ensemble d'objets élément, puis modifiez en modifiant l'attribut className du style CSS de l'objet élément, la méthode getElementsByTagName() peut obtenir l'objet élément du nom de balise spécifié et renvoie une liste contenant tous les objets élément sous le nom de balise. Nous pouvons utiliser cette méthode pour obtenir un ensemble d'objets élément dont les styles doivent être modifiés, puis changer le style des éléments en modifiant l'attribut className des objets élément.

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].className = "change";
}

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!