JavaScriptからCSSファイルに書かれた定義を取得する

JavaScriptからCSSの値を取得するには、たいていの場合はjQueryのcssメソッドを使えばOK.

$('#item').css('background-color');

ただし、これがCSSファイルに書かれたmax-widthやmax-heightの場合だとChromeやFirefoxごとに実装が違っていて、%で返ってきたり計算済みのpxで返ってきたりと面倒くさい。こうなる前のCSSファイルに書かれた最初のCSSの値をとる方法について書く。

計算前のスタイルシートの定義はdocumentのスタイルシートオブジェクトが保持していて、document.styleSheets[0].cssRulesで取得できる。ただし、ここからほしい情報を取り出すのはかなり面倒なようなので、jquery.stylesheet.jsというラッパーを使うと超らくちん。

以下、JSFiddleにサンプルコードを書いた。★マークをつけたところが、実際にCSSファイルから定義を読み込んだ結果。

http://jsfiddle.net/akiroom/JGwqY/44/

HTML

<pre id="results"></pre>
<img id="item" src="https://i.gyazo.com/e57b7603196d139af948e9ce09c5327c.png" style="max-height: 100%">

JavaScript

var style = $('#item')[0].style;

var $ss = $.stylesheet('#item');
var result = $ss.css('max-width');

$('#results').text(
    'max-width(DOM)=' + $('#item').css('max-width') +
    '\nmax-height(DOM)=' + $('#item').css('max-height') +
    '\nmax-width(img)=' + style['max-width'] +
    '\nmax-height(img)=' + style['max-height'] +
    '\n★max-width(css)=' + $ss.css('max-width') +
    '\nmax-height(css)=' + $ss.css('max-height')
);

CSS

#item {
    max-width: 80%;
    max-height: 390px;
}

Pocket

Tweet