ホームページ >ウェブフロントエンド >jsチュートリアル >jsは要素のクラスのcss属性値コードを取得する_javascriptスキル

jsは要素のクラスのcss属性値コードを取得する_javascriptスキル

WBOY
WBOYオリジナル
2016-05-16 17:03:361185ブラウズ

js を使用して div 内の CSS のマージン、パディング、高さ、境界線などを取得する方法。 document.getElementById("id").style.margin を使用して直接取得できると言えるかもしれません。ただし、あなたが言ったことは、タグに直接書かれたスタイルの属性のみを取得でき、スタイルタグの外の属性(CSSファイル内の属性など)を取得することはできません。両方の値は以下の方法で取得できます。
レンダリングの例は次のとおりです:

jsは要素のクラスのcss属性値コードを取得する_javascriptスキル

jsがcssの属性を取得する際、タグにstyleが無い場合はcssの属性を直接取得できないため、これを行うメソッドが必要となります。
getStyle(obj,attr) 呼び出しメソッドの説明: obj はオブジェクト、attr は属性名で、js の書き込みメソッドと互換性がある必要があります (参照: JS はスタイル名の書き込みメソッドを制御できます) )。

Js コード

コードをコピー コードは次のとおりです。

function getStyle(obj) ,attr) {
var ie = ! "v1";//簡易判定ie6~8
if(attr=="backgroundPosition"){//IE6~8はbackgroundPosition書き込みに対応していないのでbackgroundPositionXを特定/ Y
if (ie){ return obj.currentStyle.
}
else{
return document.defaultView.getComput edStyle(obj,null)[attr];
}
}




完全なテスト コード例: HTML コード


コードをコピー

コードは次のとおりです:
js は要素のクラスの CSS 属性値を取得します




box1 の css.#box1{margin:5px;padding:5px;height:100px;width:200px;}

box1 のマージン上部を取得

box1 のパディングトップを取得
box1 の高さを取得


<script><br>//クラスの属性値を取得します<br>var divs=document.getElementById("box1");<br>function getStyle(obj,attr){</p> var ie = ! "v1";//簡易判定ie6~8<p> if(attr=="backgroundPosition"){//IE6~8はbackgroundPositionの記述方法に対応していないため、backgroundPositionX/Y<br> if(ie){ return obj.currentStyle.backgroundPositionX " " obj.currentStyle.backgroundPositionY;<br> }<br> }<br> if(obj.currentStyle){<br> return obj.currentStyle[attr];<br> }<br> else{<br> return document.defaultView.getComputedStyle(obj,null)[attr];<br> }<br>}<br>function getcss(typ){<br>alert(getStyle(divs,typ)); <br>}<br></script>




声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。