JavaScriptでCSS値を取得する

199

次のようなJavaScriptを介してCSS値を設定できることを知っています。

document.getElementById('image_1').style.top = '100px';

しかし、現在の特定のスタイル値を取得できますか？要素のスタイル全体を取得できる場所を読みましたが、必要がない場合は文字列全体を解析する必要はありません。

javascript  css 
— マイケル・ポール
ソース
取得しようとしている「特定のスタイル値」は何ですか？
— BryanH 2011年
現在の位置の値：高さ、幅、上部、マージンなど
— Michael Paul
2
あなたの質問は、var top = document.getElementById('image_1').style.top; 5月のような何かがあなたが望むものではないならそれを言い換えたいと思うと信じるのに役立ちます
— マーク
Thx All、どちらの方法も、私が必要とするものだけで完璧に機能します。Jqueryメソッドはもう少しコンパクトなので、おそらくそれを使用します。
— マイケルポール

回答:

358

使用できますgetComputedStyle()。

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

jsFiddle。

— アレックス
ソース
10
たとえば、divの背景色を変更する場合は、「backgroung-color」ではなく「backgroundColor」を使用しないように注意してください;）
— baptx
4
slwは頭字語ですか、それとも遅いですか？
— David Winiecki 2014年
3
getComputedStyleは、IE 8以下ではサポートされていません。
— David Winiecki、2014年
6
ややオフトピック：一部（すべて？）の省略形のcssプロパティはJavaScriptでアクセスできません。たとえば、パディング左を取得できますが、パディングは取得できません。JSFiddle
— David Winiecki
4
@DavidWiniecki私は本当にwebdevsがIE8を主流のブラウザと見なすべきだとは本当に信じていません。マイクロソフトでサポートされなくなったことを考慮して
— Kevin Kuyl、2015
23

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

ブラウザー間で簡単に行うことはできません。IEにはelement.currentStyleプロパティによる独自の方法があり、他のブラウザーによって実装されるDOMレベル2の標準的な方法はdocument.defaultView.getComputedStyleメソッドを使用する方法です。

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

function getStyle(el, styleProp) {
    var value, defaultView = (el.ownerDocument || document).defaultView;
    // W3C standard way:
    if (defaultView && defaultView.getComputedStyle) {
        // sanitize property name to css notation
        // (hyphen 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;
    }
}

メインリファレンススタックオーバーフロー

— アミール・モバヘディ
ソース
21

以下を使用してください。それは私を助けました。

document.getElementById('image_1').offsetTop

Get Stylesも参照してください。

— user843938
ソース
16

DOM操作なしでCSS値をチェックするためのクロスブラウザーソリューション：

function get_style_rule_value(selector, style)
{
 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
   if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector)
   {
    return myrules[j].style[style];
   }
  }
 }
};

使用法：

get_style_rule_value('.chart-color', 'backgroundColor')

サニタイズされたバージョン（セレクター入力を小文字に強制し、「。」を先頭に付けずにユースケースを許可します）

function get_style_rule_value(selector, style)
{
 var selector_compare=selector.toLowerCase();
 var selector_compare2= selector_compare.substr(0,1)==='.' ?  selector_compare.substr(1) : '.'+selector_compare;

 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
    if (myrules[j].selectorText)
    {
     var check = myrules[j].selectorText.toLowerCase();
     switch (check)
     {
      case selector_compare  :
      case selector_compare2 : return myrules[j].style[style];
     }
    }
   }
  }
 }
— カロルフ
ソース
私は長い一日を過ごしていたが、これはいくつかの理由でうまくいかなかった。pastie.org/9754599は、無効なルールリストを破棄し、最後の===の両側を小文字にすることで、より適切に機能します。あなたのソリューションがその日を救ったことに感謝します！
— Richard Fox
良い答え、いくつかのエッジケースの使用問題を修正するために最後にサニタイズバージョンを追加しました。
— 同期されていない2016年
7

プログラムで設定すると、変数のように呼び出すことができます（つまりdocument.getElementById('image_1').style.top）。それ以外の場合は、常にjQueryを使用できます。

<html>
    <body>
        <div id="test" style="height: 100px;">Test</div>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            alert($("#test").css("height"));
        </script>
    </body>
</html>
— アッドアウト
ソース
7
私はあなたのjQueryの例が非常に明確（または正しい）だとは思いません。
— アレックス
styleプロパティは、CSSルールで定義されていない、要素に適用されるすべてのスタイルをインラインで返します。
— Steven Koch、
2

ライブラリに興味があるなら、なぜMyLibraryとgetStyleを使わないのか。

jQuery cssメソッドの名前が間違っています。CSSはスタイルを設定する方法の1つにすぎず、必ずしも要素のスタイルプロパティの実際の値を表しているとは限りません。

— RobG
ソース
2

2020年に

ご使用前にご確認ください

あなたはcomputedStyleMap（）を使うことができます

答えは有効ですが、返されるユニットを確認する必要がある場合があります。文字列がなくてもslice()それを取得できsubstring()ます。

var element = document.querySelector('.js-header-rep');
element.computedStyleMap().get('padding-left');

var element = document.querySelector('.jsCSS');
var con = element.computedStyleMap().get('padding-left');
console.log(con);
.jsCSS {
  width: 10rem;
  height: 10rem;
  background-color: skyblue;
  padding-left: 10px;
}
<div class="jsCSS"></div>
スニペットを展開

— ニシャーグ・シャー
ソース
1

安全のため、要素を読み取ろうとする前に、その要素が存在することを確認することをお勧めします。存在しない場合、コードは例外をスローし、残りのJavaScriptでの実行を停止し、ユーザーにエラーメッセージを表示する可能性があります。あなたは優雅に失敗できるようになりたいです。

var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
  height = item.style.height;
  width = item.style.width;
  top = item.style.top;
  margin = item.style.margin;
} else {
  // Fail gracefully here
}
— ブライアンH
ソース
5
ノードがDOMにない可能性があることを本当に期待していない限り、これは悪い考えです。nullが予期されていないときにブラインドnullチェックを実行すると、エラーが表示されないように見えますが、バグを隠す可能性が高くなります。ノードが存在すると予想される場合は、ノードが存在しないことをコード化しないでください。コードを修正できるようにエラーを発生させます。この回答は質問自体とは無関係であり、（悪い）提案のほうが多いため、コメントにする必要があります。
— フアンメンデス
2
コメントありがとうございます。私は防御的に発達する傾向があるのでそれをします。ここに質問があります：ユーザーのマシンでどのようにエラーを表示しますか？自分のマシンで機能するものが他のマシンでは機能しない可能性があることを忘れないでください（異なるブラウザーとOS、ページの動作に影響を与えるプラグイン、その他のさまざまな機能がオフになっているなど）。ポイントは、それが正常に失敗するようにして、ページがユーザーに役に立たないエラーをポップアップするのではなく、意図したものに近いものを実行することでした。
— BryanH 2012年
@BryanH idが「image_1」の要素を表示しないブラウザのバグはありますか？;）
— アレックス2014
@alexいいえ。そのIDの要素がない場合、OPのコードはエラーで失敗します。例。私の提案は、これが決して起こり得ないようにコード化することでした。
— BryanH 2015
0

上記のDOM操作のないクロスブラウザーソリューションは、最後ではなく最初の一致ルールを提供するため機能しません。最後に一致するルールが適用されます。ここに作業バージョンがあります：

function getStyleRuleValue(style, selector) {
  let value = null;
  for (let i = 0; i < document.styleSheets.length; i++) {
    const mysheet = document.styleSheets[i];
    const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
    for (let j = 0; j < myrules.length; j++) {
      if (myrules[j].selectorText && 
          myrules[j].selectorText.toLowerCase() === selector) {
        value =  myrules[j].style[style];
      }
    }
  }
  return value;
}

ただし、この単純な検索は、複雑なセレクターの場合には機能しません。

— jcdufourd
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.