web-dev-qa-db-ja.com

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

スタイルタグによってスタイルが設定されている要素からスタイルを取得する方法を探しています。

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

体内で

<div id="box"></div>

ライブラリを使用せずに、まっすぐなJavaScriptを探しています。

私は次のことを試みましたが、ブランクを受け取り続けます：

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

Javascriptを使用してスタイルを設定した場合にのみ上記を使用できるが、スタイルタグでは使用できないことに気付きました。

javascripthtmlcssstylesheet
56
stan

element.style プロパティを使用すると、その要素でinlineとして定義されたCSSプロパティのみを知ることができます（プログラムで、または要素）、計算済みスタイルを取得する必要があります。

クロスブラウザの方法でそれを行うのはそれほど簡単ではありません、IEはelement.currentStyleプロパティ、および他のブラウザで実装されているDOMレベル2standardの方法は document.defaultView.getComputedStyle メソッド。

2つの方法には違いがあります。たとえば、IE element.currentStyle プロパティは、camelCaseの2つ以上の単語で構成されるCCSプロパティ名にアクセスすることを想定しています（例maxHeight、fontSize、backgroundColorなど）、標準的な方法では、ダッシュで区切られた単語（たとえば、max-height、font-size、background-colorなど）。

また、IE element.currentStyleは、指定された単位ですべてのサイズ（12pt、50％、5emなど）を返します。標準の方法では、実際のサイズは常にピクセル単位で計算されます。

しばらく前に、クロスブラウザの方法で計算されたスタイルを取得できるクロスブラウザ関数を作成しました。

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").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;
  }
}

上記の関数は、色の場合など、一部の場合には完全ではありません。標準のメソッドは、rgb（...）表記で色を返します。 IE定義されたとおりにそれらを返します。

私は現在、このテーマの記事に取り組んでいます。この関数に加えた変更をフォローできます here 。

76
CMS

Window.getComputedStyle（）を使用できるようになったと思います

ドキュメントMDN

var style = window.getComputedStyle(element[, pseudoElt]);

要素の幅を取得する例：

window.getComputedStyle(document.querySelector('#mainbar')).width
17
justina_de

jQuery では、alert($("#theid").css("width"))を実行できます。

-jQueryをまだ見ていない場合は、強くお勧めします。多くの単純なJavaScriptタスクが楽になります。

更新

記録のために、この投稿は5歳です。 Webは開発され、前進しました。PlainOld Javascriptを使用してこれを行う方法がありますが、これは優れています。

9
Jared Forsyth

Jqueryで.css（）を使用すると、styleタグにアクセスして変更できます

例えば：

var color = $( this ).css( "background-color" );
  $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );
0
Sanjeev S

要素を受け取る関数getStylesを作成でき、他の引数は必要な値のプロパティです。

const convertRestArgsIntoStylesArr = ([...args]) => {
    return args.slice(1);
}

const getStyles = function () {
    const args = [...arguments];
    const [element] = args;

    let stylesProps = [...args][1] instanceof Array ? args[1] : convertRestArgsIntoStylesArr(args);

    const styles = window.getComputedStyle(element);
    const stylesObj = stylesProps.reduce((acc, v) => {
        acc[v] = styles.getPropertyValue(v);
        return acc;
    }, {});

    return stylesObj;
};

これで、この関数を次のように使用できます。

const styles = getStyles(document.body, "height", "width");

OR

const styles = getStyles(document.body, ["height", "width"]);
0
Praveen Kr. Saini