3

外部または埋め込みスタイルシートを使用して指定された要素のスタイル宣言にアクセスするにはどうすればよいですか。 ..しかし、それはブラウザ依存です.例:クロムでは、オブジェクトはnullです...ブラウザに依存しない方法は何ですか?

4

2 に答える 2

2

これは、IE9 より前の IE と他のすべてのブラウザーが異なる方法で行う場合です。スタイルシートからオブジェクトに適用されているものを含むオブジェクトの現在のスタイルを取得するには、次のようなものを使用できます。

function getStyle(el, cssprop) {
    if (document.defaultView && document.defaultView.getComputedStyle)
        return document.defaultView.getComputedStyle(el, null)[cssprop];
    else //IE
        return el.currentStyle[cssprop];
}
于 2012-04-28T14:26:44.413 に答える
2

これは実際にはブラウザに依存します...そこにあるコードから適応した、自動拡張テキスト領域を作成するために使用するコードが少しあります。

ここでの$関数はPrototypeからのものであることに注意してください。

function getStyleFromCss(el, style) {
    /* Hack required by IE */
    var value = $(el).getStyle(style);
    if (!value) {
        /* For other browsers. Actually this equals 'window'. Use that
         *  if Opera fails on you. */
        if(document.defaultView) {
            value = document.defaultView.getComputedStyle(el, null).
                getPropertyValue(style);
            // for IE
        } else if(el.currentStyle) {
            value = el.currentStyle[style];
        }
    }
    if(value.length > 0){
        /* if the value returned has the word px in it, we check for
         *  the letter x */
        if (value.charAt(value.length-1) == "x") {
            value = parseInt(value.substring(0, value.length-2));
        }
    }
    return value;
}

PrototypeのgetStyle()関数はこのように定義されているため、必要に応じて簡単に調整できるはずです。

getStyle: function(element, style) {
  element = $(element);
  style = style == 'float' ? 'cssFloat' : style.camelize();
  var value = element.style[style];
  if (!value || value == 'auto') {
    var css = document.defaultView.getComputedStyle(element, null);
    value = css ? css[style] : null;
  }
  if (style == 'opacity') return value ? parseFloat(value) : 1.0;
  return value == 'auto' ? null : value;
},
于 2012-04-28T14:28:34.330 に答える