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

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 サイトの他の関連記事を参照してください。