ホームページ > ウェブフロントエンド > jsチュートリアル > 異なるブラウザ間で HTML 要素のスタイル値を取得するにはどうすればよいですか?

異なるブラウザ間で HTML 要素のスタイル値を取得するにはどうすればよいですか?

DDD
リリース: 2024-12-01 07:19:14
オリジナル
973 人が閲覧しました

How to Get an HTML Element's Style Values Across Different Browsers?

JavaScript で HTML 要素のスタイル値を取得する方法

HTML 要素からスタイル値を取得することは、要素の外観を動的に操作するために不可欠です。 JavaScript を使用してスタイルを設定するのは簡単ですが、スタイル タグで定義されたスタイルにアクセスするのは難しい場合があります。

クロスブラウザーに関する考慮事項

要素スタイルにアクセスするには、クロスブラウザーのアプローチが必要です。 Internet Explorer は独自のプロパティ currentStyle を使用しますが、他のブラウザは W3C 標準に従って document.defaultView.getComputedStyle を利用します。

カスタム クロスブラウザ関数

クロスを処理するには-ブラウザの不一致、カスタム関数が頻繁に起こる採用:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    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;
  }
}
ログイン後にコピー

使用法

要素のスタイル プロパティを取得するには:

var element = document.getElementById("box");
var width = getStyle(element, "width");
ログイン後にコピー

現在の考慮事項

上記の関数は、特に返される色の場合、すべてのエッジ ケースを処理できるわけではありません。値は IE と他のブラウザ間で異なる場合があります。

以上が異なるブラウザ間で HTML 要素のスタイル値を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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