Explication détaillée des opérations dynamiques Javascript Compétences CSS_javascript

1. Comment utiliser js pour exploiter les attributs CSS

1. Pour les attributs CSS sans tiret, utilisez généralement directement le nom de l'attribut de style.

Tels que : obj.style.margin, obj.style.width, obj.style.left, obj.style.position

2. Pour les attributs CSS contenant des traits de soulignement, supprimez chaque trait de soulignement et remplacez le premier caractère après chaque trait de soulignement par des lettres majuscules.

Tels que : obj.style.marginTop, obj.style.borderLeftWidth, obj.style.zIndex, obj.style.fontFamily, etc.

3. Méthode d'écriture spéciale pour que js exploite l'attribut CSS float

Parce que float est un mot réservé de JavaScript, nous ne pouvons pas utiliser obj.style.float directement, car cette opération n'est pas valide. La méthode d'utilisation correcte est : IE : obj.style.styleFloat, d'autres navigateurs tels que Mozilla (gecko), ff, etc. utilisent styleFloat : obj.style.cssFloat.

2. Utilisez js pour obtenir les valeurs des attributs CSS

1. Obtenez le nom de l'attribut Style : obj.style.

JS obtient la valeur de l'attribut CSS

Impossible d'accéder à la classe.

2. Récupérez les propriétés CSS à l'intérieur de la classe et à l'extérieur du lien : IE utilise la méthode obj.currentStyle["property name"], tandis que FF utilise la méthode getComputedStyle

3. Utilisez js pour attribuer des valeurs aux attributs CSS

1. Attribuer un attribut de classe

Affectation : document.getElementById('ceil').className = "class1";

S'il a plusieurs valeurs : document.getElementById('ceil').className = "class1 class2 class3";

2. obj.style.cssText définit le style CSS d'un objet

document.getElementById('navision').style.cssText = "Votre code CSS';

Résumé

Savoir comment modifier dynamiquement les styles appliqués à une page est extrêmement utile pour créer des pages Web élégantes et interactives - les connaissances expliquées dans cet article constituent la base de techniques plus avancées telles que les animations JavaScript. Il est important de noter que vous devez utiliser la modification de style dynamique de manière responsable et ne pas en abuser. Comme mentionné précédemment, les modifications de style peuvent également améliorer l'efficacité du Web : l'affichage et le masquage du contenu peuvent permettre d'éviter des interactions de données inutiles entre le client et le serveur.