Exemple de code détaillé montrant comment modifier les propriétés CSS avec JavaScript natif

Pour modifier les propriétés CSS avec JavaScript, il vous suffit d'écrire du JavaScript natif.

Utilisez JS pour modifier la valeur de l'attribut class de la balise :

L'attribut class est un des moyens de référencer la feuille de style sur la balise. Sa valeur est un sélecteur de la feuille de style. .Si la classe est modifiée La valeur de l'attribut et la feuille de style référencée par la balise sont également modifiées, c'est donc la première méthode de modification.

Le code pour changer l'attribut de classe d'une balise est :

document.getElementById( id ).className = string

document.getElementById( id ) est utilisé pour obtenir la balise Vous pouvez également obtenir l'objet DOM correspondant en utilisant d'autres méthodes. className est une propriété de l'objet DOM qui correspond à l'attribut de classe de l'étiquette. String est la nouvelle valeur de l'attribut de classe , qui doit être un sélecteur CSS défini.

En utilisant cette méthode, vous pouvez remplacer la feuille de style CSS de la balise par une autre, ou vous pouvez également appliquer le style spécifié à une balise à laquelle aucun style CSS n'est appliqué.

Exemple :

<style type="text/css"> 
.txt { 
font-size: 30px; font-weight: bold; color: red; 
} 
</style> 
<p id="tt">欢迎光临！</p> 
<p><button onclick="setClass()">更改样式</button></p> 
<script type="text/javascript"> 
function setClass() 
{ 
document.getElementById( "tt" ).className = "txt"; 
} 
</script>

Utilisez JS pour modifier la valeur de l'attribut style de la balise :
L'attribut style est également l'un des moyens de référencer le feuille de style sur la balise. La valeur est une feuille de style CSS. L'objet DOM a également un attribut de style, mais cet attribut lui-même est également un objet. Les attributs de l'objet Style correspondent un à un aux attributs CSS. Lorsque les attributs de l'objet Style sont modifiés, la valeur de l'attribut CSS de. la balise correspondante changera également, c'est donc la deuxième méthode de modification.

Le code pour changer l'attribut CSS d'une étiquette est :

document.getElementById( id ).style.Attribute name = value
document.getElementById( id ) est utilisé pour obtenir l'étiquette correspondante Vous pouvez également obtenir l'objet DOM en utilisant d'autres méthodes. le style est une propriété de l'objet DOM, qui est lui-même un objet. Le nom de la propriété est le nom de la propriété de l'objet Style, qui correspond à une certaine propriété CSS.

Remarque : Cette méthode modifie une seule propriété CSS. Elle n'affecte pas les valeurs des autres propriétés CSS sur l'étiquette.

Exemple :

p id="t2">欢迎光临！</p> 
<p><button onclick="setSize()">大小</button> 
<button onclick="setColor()">颜色</button> 
<button onclick="setbgColor()">背景</button> 
<button onclick="setBd()">边框</button> 
</p> 
<script type="text/javascript"> 
function setSize() 
{ 
document.getElementById( "t2" ).style.fontSize = "30px"; 
} 
function setColor() 
{ 
document.getElementById( "t2" ).style.color = "red"; 
} 
function setbgColor() 
{ 
document.getElementById( "t2" ).style.backgroundColor = "blue"; 
} 
function setBd() 
{ 
document.getElementById( "t2" ).style.border = "3px solid #FA8072"; 
} 
</script>

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!