Copiez le code comme suit :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="serveur">
<titre></titre>
<style type="text/css">
.jour
{
couleur d'arrière-plan : Blanc ;
}
.nuit
{
couleur d'arrière-plan : noir
}
</style>
<langage de script="javascript" type="text/javascript">
fonction operStyle() {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
if (divObj.className == "jour") {
divObj.className = "nuit" ;
btnObj.value = "Allumez la lumière";
} autre {
divObj.className = "jour" ;
btnObj.value = "Éteignez les lumières";
}
}
//Modifie par lots les attributs de style des div, composés de plusieurs styles
//Méthode 1 :
fonction méthodeUn() {
var divObj = document.getElementById("divTest");
divObj.style.backgroundColor = "bleu";
divObj.style.border = "solide 1px rouge";
divObj.style.width = "300px";
divObj.style.height = "200px";
divObj.style.backgroundPosition = "centre" ;
}
//Méthode 2 :
fonction méthodeDeux() {
var divObj = document.getElementById("divTest");
divObj.style.cssText = "couleur d'arrière-plan : bleu ; bordure : rouge uni 1 px ; largeur : 300 px ; hauteur : 200 px ; position d'arrière-plan : centre " ;
}
</script>
</tête>
<corps>
<form id="form1" runat="serveur">
<div id="divContent">
<font color="red">Je suis un div, bah bah bah ! </font>
</div>
<input type="button" value="Éteignez les lumières" id="btnCommit" onclick="operStyle();" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<heure />
<h1>Modifier le style de divTest et exploiter plusieurs attributs</h1>
<div id="divTest" >
<font color="red">Modifier le style de divTest</font>
</div>
<input type="button" value="Modifier le style de divTest" onclick="methodTwo()" />
</form>
</corps>
</html>
Lorsque nous utilisons js pour écrire des styles CSS, nous utilisons généralement les deux méthodes suivantes :
Généralement, lorsque nous utilisons js pour définir le style des objets élément, nous utiliserons cette forme :
Copiez le code comme suit :
var element= document.getElementById("id");
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border="solid 1px rouge";
Cependant, la méthode ci-dessus présente un inconvénient. S'il y a plus de styles, il y aura beaucoup de code ; et le remplacement du style de l'objet via JS est un processus typique de destruction et de reconstruction du style d'origine. augmenter la charge du navigateur.
Il existe une méthode cssText dans js :
La syntaxe est la suivante : obj.style.cssText("style");
Nous pouvons modifier le code ci-dessus pour :
Copiez le code comme suit :
element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
Cette méthode d'écriture peut tenter d'éviter les redistributions multiples de la page et d'améliorer les performances de la page.