Js でスタイルを取得する一般的な方法-jsチュートリアル-php.cn

JS で CSS を操作したい場合、最も重要なことはスタイルを取得することであることは承知しています。参考までに、JS でスタイルを取得する最も一般的な方法についての記事を示します。

Document div{ color:yellow; } This is div ログイン後にコピー element.style 属性を使用して取得します

var div = document.getElementsByTagName("div")[0]; console.log(div.style.color); //"" console.log(div.style.backgroundColor); //red ログイン後にコピー element.style 属性は、 タグ内のスタイルや外部スタイルではなく、インライン スタイルのみを取得できます

element.style は要素の属性を使用すると、属性を再割り当てして要素の表示を変更できます。

var div = document.getElementsByTagName("div")[0]; div.style['background-color'] = "green"; console.log(div.style.backgroundColor); //green ログイン後にコピー 2. getComputedStyle と currentStyle を通じてスタイルを取得します

getComputedStyle の使用環境は chrome/safari/firefox IE 9,10,11 です

var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow ログイン後にコピー currentStyle は IE で完全にサポートされていますが、chrome はサポートしていません。はサポートしていません

var div = document.getElementsByTagName("div")[0]; var styleObj = div.currentStyle; console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow ログイン後にコピー 3. ele.style と getComputedStyle または currentStyle の違い

3.1 ele.style は読み取り/書き込みですが、getComputedStyle と currentStyle は読み取り専用です

3.2 ele.style は CSS スタイルのみを取得できます。そして、getComputedStyle と currentStyle は他のデフォルト値も取得できます

3.3 ele.style は、必ずしも最終的なスタイルではなく、style 属性のスタイルを取得しますが、他の 2 つは要素の最終的な CSS スタイルを取得します

4.スタイル互換記述メソッドを取得します

//获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名 function getStyle(obj,attr){ //针对IE if(obj.currentStyle){ return obj.currentStyle[attr]; //由于函数传过来的attr是字符串，所以得用[]来取值 }else{ //针对非IE return window.getComputedStyle(obj,false)[attr]; } } function css(obj,attr,value){ if(arguments.length == 2){ return getStyle(obj,attr); }else{ obj.style[attr] = value; } } .window.getComputedStyle(ele[,pseudoElt]); ログイン後にコピー 第二引数がnullまたは省略された場合はeleのCSSStyleDeclarationオブジェクトを取得します

擬似クラスの場合は擬似クラスのCSSStyleDeclarationオブジェクトを取得します

div{ width:200px; height:200px; background-color:#FC9; font-size:20px; text-align:center; } div:after{ content:"This is after"; display:block; width:100px; height:100px; background-color:#F93; margin:0 auto; line-height:50px; } This is div var btn = document.querySelector('#btn'); btn.onclick = function(){ var div = document.querySelector('#myDiv'); var styleObj = window.getComputedStyle(div,'after'); console.log(styleObj['width']); } ログイン後にコピー

getPropertyValue CSSStyleDeclarationオブジェクトの指定されたプロパティ値

var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.getPropertyValue("background-color")); getPropertyValue(propertyName);中的propertyName不能是驼峰式表示 obj.currentStyle['margin-left'] 有效 obj.currentStyle['marginLeft'] 有效 window.getComputedStyle(obj,null)['margin-left'] 有效 window.getComputedStyle(obj,null)['marginLeft'] 有效 window.getComputedStyle(obj,null).getPropertyValue('margin-left') 有效 window.getComputedStyle(obj,null).getPropertyValue('marginLeft') 无效 obj.currentStyle.width 有效 obj.currentStyle.background-color 无效 obj.currentStyle.backgroundColor 有效 window.getComputedStyle(obj,null).width 有效 window.getComputedStyle(obj,null).background-color 无效 window.getComputedStyle(obj,null).backgroundColor 有效 ログイン後にコピー まとめると、「-」が付いたプロパティは直接クリックできないため、それを処理するgetProperty Valueメソッド がありますが、 [] getPropertyValue

7.defaultView

を置き換えます。多くのオンライン デモ コードでは、getComputedStyle は document.defaultView オブジェクトを通じて呼び出されます。 window オブジェクト を通じて直接呼び出すことができるため、ほとんどの場合、これは必要ありません。ただし、defaultView を使用しなければならない状況が 1 つあります。それは、Firefox3.6 のサブフレーム内のスタイル (iframe) にアクセスすることです

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、注意してください。その他の関連トピックについては、PHP 中国語 Web サイトの記事をご覧ください。