ホームページ > ウェブフロントエンド > jsチュートリアル > jsを解析してCSSスタイルを取得する方法

jsを解析してCSSスタイルを取得する方法

黄舟
リリース: 2017-02-20 14:33:39
オリジナル
1561 人が閲覧しました

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) に注目してください。

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