Résumé de tous les exemples de code de style pour que javascript contrôle le style CSS

Enregistrez les méthodes utilisées par JS pour contrôler CSS

Utilisez javascript pour modifier les attributs d'une classe CSS...

<style type="text/css"> 
.orig { 
display: none; 
} 
</style>

Vous, je souhaite changer son attribut d'affichage de none à inline.
Solution : Dans IE :

document.styleSheets[0].rules[0].style.display = "inline";

Dans Firefox :

document.styleSheets[0].cssRules[0].style.display = "inline";

Discussion : Vous pouvez créer une fonction pour rechercher des styles avec des noms spécifiques Objet :

function getstyle(sname) { 
for (var i=0;i<document.styleSheets.length;i++) { 
var rules; 
if (document.styleSheets[i].cssRules) { 
rules = document.styleSheets[i].cssRules; 
} else { 
rules = document.styleSheets[i].rules; 
} 
for (var j=0;j<rules.length;j++) { 
if (rules[j].selectorText == sname) { 
//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.有说错的地方欢迎指正 
return rules[j].style; 
} 
} 
} 
}

Alors juste :

getstyle(".orig").display = "inline";

.
------------------ Notez que document.styleSheets[0].rules[0].style L'indice de ce tableau styleSheets[0] représente le numéro de page N Feuilles de style CSS, l'indice du tableau de ses règles subordonnées[0] représente le Nième style dans cette feuille de style, par exemple :

<style type="text/css"> 
.s{display="none";} 
.w{display="none";} 
</style>

Modifier la règle S : document .styleSheets[0].rules [0].style.display='inline';
Modifier la règle W : document.styleSheets[0].rules[1].style.display = 'inline';
Remarque : La méthode de combinaison de CSS et Le HTML doit être d5712e9cdb50a3edfce90e40c6f7bebb ou c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 La méthode ci-dessus est réalisable, comme @IMPORT No.

Ce qui suit est un enregistrement des styles d'accès par JS en CSS :
Utiliser javascript pour obtenir et définir le style
La norme DOM introduit le concept de remplacement des feuilles de style lorsque nous utilisons document.getElementById (. "id").style.backgroundColor Lors de l'obtention du style, vous obtenez uniquement la couleur d'arrière-plan définie dans l'attribut style de l'id. Si la couleur d'arrière-plan n'est pas définie dans l'attribut style de l'id, elle sera renvoyée vide. c'est-à-dire que si l'identifiant utilise class L'attribut fait référence à une feuille de style externe et la couleur d'arrière-plan est définie dans cette feuille de style externe Désolé, document.getElementById("id").style.backgroundColor n'est pas facile à utiliser. Si vous souhaitez obtenir les paramètres dans la feuille de style externe, vous devez utiliser la méthode getComputedStyle() de l'objet window Le code est écrit comme ceci

window.getComputedStyle(id,null).backgroundColor

Mais le problème de compatibilité revient. fonctionne bien dans Firefox, mais pas dans IE

Les deux La méthode compatible orer s'écrit

window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];

Si c'est pour obtenir la couleur d'arrière-plan, la valeur de retour de cette méthode dans Firefox et IE est toujours différent. Dans IE, il renvoie "#ffff99". Dans Firefox, "rgb(238, 44, 34)"

Il convient de noter que window.getComputedStyle(id,null) ne peut pas définir le style, il ne peut que l'obtenir. Pour le définir, vous devez écrire l'identifiant comme ceci. style.background="#EE2C21";
CURRENTSTYLE ne peut obtenir le style qu'en mode lecture seule dans IE

.

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!