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 属性は配列のようなスタイル属性とそれに対応するセットを返すため、スタイルの取得と設定は style 属性にのみ依存します。したがって、特定のスタイルにアクセスするには、「ele.style.Attribute name」と「ele.style['Attribute name']」の 2 つの方法があります。ただし、CSS スタイルで、background-color; margin-left などのダッシュで接続された属性名については、style 属性を使用してスタイルを取得および設定する場合、名前をキャメルケースに変更する必要があることに注意してください。 ele.style.backgroundColor.

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

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

(2.2)IEブラウザでは、getComputedStyle()メソッドはサポートされていませんが、各タグ要素にはstyle属性と同様の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>

上記は、CSS スタイルを取得するために js を解析する内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。