Quelles sont les manières d'utiliser la méthode cssText de l'objet style ?-tutoriel HTML-php.cn

Quelles sont les manières d'utiliser la méthode cssText de l'objet style ?

php中世界最好的语言

Libérer： 2018-02-22 09:35:43

original

2197 Les gens l'ont consulté

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;";

Copier après la connexion

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);

Copier après la connexion

dans IE. est : FONT-SIZE : 13px ; COULEUR : rouge

Avantages 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”;

Copier après la connexion

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;”;

Copier après la connexion

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;’

Copier après la connexion

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>

Copier après la connexion

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!