Maison >interface Web >js tutoriel >JS obtient des compétences en style CSS (style/getComputedStyle/currentStyle)_javascript

JS obtient des compétences en style CSS (style/getComputedStyle/currentStyle)_javascript

WBOYoriginal: 2016-05-16 15:19:191267parcourir

Les styles CSS sont divisés en trois catégories :
Style en ligne : est écrit dans le tag, et le style en ligne n'est valable que pour tous les tags.
Style interne : est écrit en HTML, et le style interne n'est valable que pour la page Web où il se trouve.
Feuille de style externe : Si plusieurs pages Web doivent utiliser le même style (Styles), écrivez le style (Styles) dans un fichier CSS avec le suffixe .css, puis ajoutez-le à chaque page. Référencez ce fichier CSS dans une page Web qui doit utiliser ces styles (Styles).

getComputedStyle est une méthode qui peut obtenir toutes les valeurs finales des propriétés CSS utilisées de l'élément actuel. Ce qui est renvoyé est un objet de style CSS ([object CSSStyleDeclaration])
currentStyle est une propriété du navigateur IE et renvoie un objet de style CSS

l'élément fait référence à l'objet DOM obtenu par JS
element.style // Seul peut obtenir des styles intégrés
element.currentStyle //Le navigateur IE obtient des styles non intégrés
window.getComputedStyle(element, pseudo-class) //Les navigateurs non IE obtiennent des styles non intégrés
document.defaultView.getComputedStyle(element, pseudo-class)//Les navigateurs non-IE obtiennent des styles non intégrés
Remarque : Avant Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), le deuxième paramètre "pseudo-classe" était obligatoire (si ce n'est pas une pseudo-classe, mis à null), ce paramètre peut désormais être omis.

Le code HTML suivant contient deux styles CSS. Le div avec la balise id est un style en ligne et le div avec id test est un style interne.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus&reg;">
    <meta name="Author" content="Yvette Lau">
    <meta name="Keywords" content="关键字">
    <meta name="Description" content="描述">
    <title>Document</title>
    <style>
      #test{
        width:500px;
        height:300px;
        background-color:#CCC;
        float:left;
      }
    </style>
  </head>
  <body>
    <div id = "test"></div>
    <div id = "tag" style = "width:500px; height:300px;background-color:pink;"></div>
  </body>
</html>

Partie JS

<script type = "text/javascript">
  window.onload = function(){
    var test = document.getElementById("test");
    var tag = document.getElementById("tag");

    //CSS样式对象:CSS2Properties{},CSSStyleDeclaration
    console.log(test.style); //火狐返回空对象CSS2Properties{}，谷歌返回空对象CSSStyleDeclaration{} 
    console.log(tag.style); //返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}
    //element.style获取的是内嵌式的style，如果不是内嵌式，则是一个空对象

    console.log(tag.style.backgroundColor);//pink
    console.log(tag.style['background-color']);//pink
    //获取类似background-color,border-radius,padding-left类似样式的两种写法啊

    console.log(test.currentStyle) //火狐和谷歌为Undefined,IE返回CSS对象
    console.log(window.getComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……} ，火狐返回CSS2Properties{……}
    console.log(window.getComputedStyle(test))
    //效果同上,但是在Gecko 2.0 (Firefox 4/Thunderbird 3.3/SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)

    console.log(test.currentStyle.width);//500px(IE)
    console.log(window.getComputedStyle(test).width); //500px;
    console.log(window.getComputedStyle(test)['width']);//500px;
    //document.defaultView.getComputedStyle(element,null)[attr]/window.getComputedStyle(element,null)[attr]   
  }
</script>

Les exemples ci-dessus servent uniquement à vérifier si la discussion précédente est correcte.

Pour plus de simplicité, nous pouvons également faire une simple encapsulation du style d'acquisition.

function getStyle(element, attr){
      if(element.currentStyle){
        return element.currentStyle[attr];
      }else{
        return window.getComputedStyle(element,null)[attr];
      }
    }
    console.log(getStyle(test,"cssFloat"));//left
    console.log(getStyle(test,"float"));  //left,早前FF和chrome需要使用cssFloat，不过现在已经不必
    console.log(getStyle(test,"stylefloat"));//火狐和谷歌都是undefined
    console.log(getStyle(test,"styleFloat")); //IE9以下必须使用styleFloat，IE9及以上,支持styleFloat和cssFloat

    console.log(window.getComputedStyle(test).getPropertyValue("float"))

Correspondant au style float, IE utilise styleFloat, alors que FF et Chrome utilisaient auparavant cssFloat. Maintenant, FF et Chrome prennent déjà en charge float, et il existe d'autres attributs, je ne les listerai pas un par un. rappelez-vous ces différences, nous introduisons deux méthodes pour accéder aux objets de style CSS :
Méthode getPropertyValue et méthode getAttribute

IE9 et autres navigateurs (getPropertyValue)
window.getComputedStyle(element, null).getPropertyValue("float");
element.currentStyle.getPropertyValue("float");
getPropertyValue ne prend pas en charge la notation de casse chameau. (Compatible avec IE9 et supérieur, FF, Chrom, Safari, Opera)
Par exemple : window.getComputedStyle(element,null).getPropertyValue("background-color");

Pour IE6~8, vous devez utiliser la méthode getAttribute pour accéder aux attributs de l'objet de style CSS

element.currentStyle.getAttribute("float");//N'a plus besoin d'être écrit comme styleFloat
element.currentStyle.getAttribute("backgroundColor");//Le nom de l'attribut doit être écrit en casse camel, sinon IE6 ne le prend pas en charge. Si vous ignorez IE6, vous pouvez l'écrire comme "background-color"

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun et qu'il permettra d'utiliser facilement JS pour obtenir des styles CSS.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Apprendre les modèles de conception JavaScript Compétences Observer pattern_javascriptArticle suivant：Apprendre les modèles de conception JavaScript Compétences Observer pattern_javascript

Articles Liés

Voir plus