Pure JavaScript を使用して HTML 要素の CSS スタイル値を取得する方法-CSSチュートリアル-php.cn

Pure JavaScript を使用して HTML 要素の CSS スタイル値を取得する方法

Linda Hamilton

リリース： 2025-01-05 07:40:38

オリジナル

825 人が閲覧しました

How to Retrieve an HTML Element's CSS Style Value Using Pure JavaScript?

JavaScript での HTML 要素のスタイル値へのアクセス

で定義されている HTML 要素からスタイルを取得する必要が生じる場合があります。 CSSスタイルシート。たとえば、次の HTML および CSS コードを考えてみましょう:

<style>
  #box { width: 100px; }
</style>
<body>
  <div>

ログイン後にコピー

ライブラリを使用せずに純粋な JavaScript のみを使用すると、width プロパティの値を取得するにはどうすればよいでしょうか。次の試行では、空白の値が返されることがよくあります:

alert(document.getElementById("box").style.width);
alert(document.getElementById("box").style.getPropertyValue("width"));

ログイン後にコピー

これらの試行は、要素の style 属性内で定義されたインラインスタイルでのみ機能するため、失敗します。計算されたスタイルを取得するには、別のアプローチが必要です。

ブラウザ間の互換性

計算されたスタイルへのアクセスには、ブラウザ間の違いによる課題が伴います。 Internet Explorer は element.currentStyle プロパティを使用しますが、他のブラウザは document.defaultView.getComputedStyle を使用して DOM レベル 2 標準に従います。さらに、IE は、キャメルケース (「maxHeight」など) を使用して、2 つ以上の単語を含むプロパティ名を別の方法で処理します。他のブラウザでは、単語を区切るためにダッシュが必要です (例: "max-height")。

クロスブラウザ関数

これらのブラウザ間の違いに対処するには、次の関数を使用します。

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  if (defaultView &amp;&amp; defaultView.getComputedStyle) {
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) {
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

ログイン後にコピー

この関数は、計算されたスタイルにアクセスするためのブラウザー間の互換性を提供します。標準動作と IE 固有動作の両方を処理します。ブラウザによって異なる色が返されるなど、すべてのケースを処理できるわけではないことに注意してください。

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