Javascript peut-il changer le style d'une page Web ?

Javascript peut changer le style de la page Web : 1. Utilisez l'instruction "Element Object.style.cssTest="Style Value"" pour la modifier ; 2. Utilisez l'instruction "Element Object.setAttribute("class", "value")" pour le modifier. ;3. Modifiez le style de la page Web en changeant le fichier CSS externe.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

javascript peut changer le style des pages Web.

En javascript, vous pouvez changer le style de la page web en modifiant dynamiquement le code CSS.

Comment modifier le code CSS avec javascript

1 Utilisez setAttribute() pour modifier le nom de classe de la feuille de style.

2. Utilisez le cssTest de l'objet de style pour modifier le CSS intégré.

3. Modifiez le CSS de l'élément en modifiant le fichier CSS externe

Exemple :

Ce qui suit est un morceau de code html et de code CSS pour expliquer la différence entre les méthodes ci-dessus.

CSS

.style1 {
    margin: 10px auto;
    background - color: #9999FF;
    display: block;
    color: White;
    border: 1px solid white;
    padding: 10px 25px;
    font - size: 18px;
}
.style1: hover {
    background - color: #66B3FF;
    cursor: pointer;
}
.style2 {
    margin: 10px auto;
    background - color: gray;
    display: block;
    color: black;
    border: 1px solid white;
    padding: 10px25px;
    font - size: 18px;
}
.style2: hover {
    background - color: black;
    color: White;
    cursor: pointer
}

Code HTML :

<div>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <div id="tool">
    <input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()" />
    <input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
    <input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
    <input type="button" value="更改外联css样式" onclick="recover()" /></div>
</div>

Première méthode, utilisez obj.style.cssTest pour modifier le CSS intégré

function changeStyle2() {
   var obj = document.getElementById("btnB");
   obj.style.cssText = " display:block;color:White;
 
}

Méthode deux, utilisez bj.setAttribute pour modifier le nom de classe de la feuille de style

Utilisez du code pour modifier le nom de classe du style de référence btB, comme l'extrait de code suivant :

function changeStyle3() {
  var obj = document.getElementById("btnB");
  //obj.className = "style2";
  obj.setAttribute("class", "style2");
}

Changez le style en changeant le nom de classe du CSS de btB. Il existe deux façons de changer le nom de la classe de style. 1. obj.className = "style2"; 2. obj.setAttribute("class", "style2");

L'utilisation de cette méthode pour modifier les CSS a un bien meilleur effet que la méthode ci-dessus.

Méthode 3 : Changer le fichier css du lien externe pour changer le css de l'élément

Changer le style de btB en changeant la référence du fichier css externe L'opération est très simple. Le code est le suivant :

Vous devez d'abord citer le fichier css externe, le code est le suivant :

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
 
function changeStyle4() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
 }

[Recommandations associées : tutoriel vidéo javascript, web front-end]

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!