jsでCSSスタイルを取得する方法

怪我咯
リリース: 2017-03-29 15:01:17
オリジナル
1101 人が閲覧しました


1. インライン スタイルを取得します

<p id ="myp" style="width:100px;height:100px;background-color:red; border:1px solid black;"></p>
<script>
  var myp = document.getElementById("myp");

  alert(myp.style.width);//100px

  alert(myp.style[&#39;height&#39;]);//100px

  var style=myp.style;
  alert(style.backgroundColor);//red

  myp.style.backgroundColor=&#39;green&#39;;//myp背景色变为绿色 
</script>
ログイン後にコピー



この場合、element.style 属性は array のようなものを返すため、スタイルの取得と設定は style 属性 のみに依存します。スタイル属性と対​​応する値のセット。つまり、特定のスタイルにアクセスするには、「ele.style.Attribute name」と「ele.style['Attribute name']」の 2 つの方法があります。ただし、CSS スタイル内の margin-left のようにダッシュで接続されている属性名については、style 属性を使用してスタイルを取得および設定する場合は、名前を次のように変更する必要があることに注意してください。 ele.style.backgroundColor.

2. 最初のメソッド、つまり style 属性を使用する場合は、インライン スタイルのみを取得できるためです。 しかし、現状では文書は基本的に分離の考え方に従っており、スタイルは基本的に外部リンクなので、この場合は他の方法で取得する必要があり、この場合は3つのスタイルを考慮する必要があります。 , スタイルを取得する場合、ブラウザごとに処理方法が異なります (主に IE と非 IE)。 そのため、ブラウザに応じて 2 つの方法に分けることができます:

(2.1) ie ブラウザ , を使用しますdocument.defaultViewobject の getComputedStyle(ele, null/pseudo-class) メソッド。最初のパラメータは検査対象の要素で、2 番目のパラメータは状況に応じて異なります。要素自体は null です。疑似クラスを調べたい場合は、それが応答の疑似クラスです。このメソッドによって取得された要素に適用される最終的なスタイルの組み合わせも、同様の配列のインスタンスです。

(2.2)IEブラウザでは、getComputedStyle()メソッドはサポートされていませんが、各タグ要素にはスタイル属性currentStyleと同様の属性があり、使い方はスタイルの使い方と同じです。得られるスタイルの範囲が異なるだけです。取得される currenStyle は getComputedStyle() メソッドに近いものです。

処理中に互換性を実現するには、これら 2 つの異なる処理方法に基づいて 関数 を作成して互換性を実現し、どのような種類のブラウザでもスタイルを正常に取得できます。以下に示すように:

<style type="text/css">
#myp {
  background-color:blue;
  width:100px;
  height:200px;
}
</style>
<p id ="myp" style="background-color:red; border:1px solid black;"></p>
<script>
  var myp = document.getElementById("myp");
  var finalStyle = myp.currentStyle ? myp.currentStyle : document.defaultView.getComputedStyle(myp, null);/*利用判断是否支持currentStyle(是否为ie)
  来通过不同方法获取style*/
  alert(finalStyle.backgroundColor);  //"red"
  alert(finalStyle.width);       //"100px"
  alert(finalStyle.height);       //"200px"
</script>
ログイン後にコピー


以上がjsでCSSスタイルを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート