Maison > Article > interface Web > Quelles sont les manières d’utiliser la méthode cssText de l’objet style ?
Quelles sont les manières d’utiliser la méthode cssText de l’objet style ?
- php中世界最好的语言original
- 2018-02-22 09:35:432159parcourir
Cette fois, je vais vous montrer comment utiliser la méthode cssText de l'objet style. Quelles sont les précautions lors de l'utilisation de la méthode cssText de l'objet style. Voici un cas pratique, jetons un oeil. .
Quelle est l'essence de cssText ?
L'essence de cssText est de définir la valeur de l'attribut de style des éléments HTML.
Comment utiliser CSSText ?
domElement.style.cssText = "color:red; font-size:13px;";
Quelle est la valeur de retour de cssText ?
Dans certains navigateurs (tels que Chrome), quelle que soit la valeur que vous lui attribuez, elle sera renvoyée. Dans IE, c'est plus pénible. Il formatera la sortie , mettra les attributs en majuscule, modifiera l'ordre des attributs et supprimera le dernier point-virgule, tel que :
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";2 alert(document.getElementById("d1").style.cssText); dans IE. est : FONT-SIZE : 13px ; COULEUR : rougeAvantages de l'utilisation de cssText De manière générale, lorsque nous utilisons js pour définir le style des objets élément, nous utiliserons ce formulaire : var element= document.getElementById(“id”); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px red”;Avec plus de styles, il y a beaucoup de code ; et l'écrasement du style d'un objet via JS est un processus typique de destruction du style original et de sa reconstruction. Cette destruction et cette reconstruction augmenteront la surcharge du navigateur. Il existe une méthode cssText dans js :
domElement.style.cssText=”样式”; domElement.style.cssText=”width:20px;height:20px;border:solid 1px red;”;De cette façon, vous pouvez essayer d'éviter la redistribution des pages et d'améliorer les performances des pages. Cependant, il y aura un problème, cela effacera le texte css d'origine. Par exemple, s'il y a 'display:none;' dans le style d'origine, alors après avoir exécuté le JS ci-dessus, l'affichage sera supprimé. .
Afin de résoudre ce problème, vous pouvez utiliser la méthode d'accumulation cssText :
domElement.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’Pour aller plus loin, s'il y a un fichier de feuille de style devant qui dit div {
text- decoration:underline; } , cela sera-t-il remplacé ? Ne le fera pas! Car il n’agit pas directement sur l’attribut style de l’élément HTML.
Analyse de cas spécifiques :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制div属性</title>
<style>
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script>
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];
for (var i = 0; i < oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function ()
{
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
}
}
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>
</body>
</html>Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois ! Lecture connexe :
Quelle est la différence entre html et xhtml et xml
Comment bloquer la page parent de page enfant d'une iframe Effet de calque pop-up de page
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!