jQueryを使用してCSSのパーセント値を取得

Question

現在、width()メソッドとそのすべてのjQueryバリエーションがピクセル値を返します。 css('width')メソッドを呼び出すと同じことが起こります。

私は.cssというファイルでスタイル付けされた要素を持っていますが、パーセンテージやピクセルでスタイルされているかどうかを知る方法はありませんが、要素に幅が明示的に設定されていない場合、パーセント値を取得します。例えば

私は、次のしている場合：

.seventy { width: 70%; } 
.pixels { width: 350px; } 

<div class="seventy"></div> 
<div class="pixels"></div> 
<div class="regular"></div> 

私は、これらの結果が必要になります。

$('.seventy').method() //=> '70%' 
$('.pixels').method() //=> '350px' 
$('.regular').method() //=> '100%' since that's how block elements behave 

この効果を得るために使用できるものは何ですか？それともカスタムアプローチですか？

Answer 1

あなたは一致を見つけるためにdocument.stylesheetsを解析できます。これは、ブラウザが解析したの後に実際のスタイルを返すだけであることに注意してください。ファイルに書き込まれた未処理の純粋なCSSを取得するためには役に立ちません。そのためには、document.stylesheetsではなくファイルそのものを解析する必要があります。

このコードは古いものであり、テストされていないため、マイレージが異なる場合があります。私は継承された値やより複雑なセレクタでどれくらいうまく実行されているか分かりません。どのような目的のために

//TEST PARSE CSS 
 
var CSS = function() { 
 
    var _sheet; 
 
    var _rules; 
 
    function CSS() { 
 
     _sheet = document.styleSheets[0]; 
 
\t   if (_sheet.rules) { 
 
\t \t \t  _rules = _sheet.rules; // IE 
 
\t \t \t } else { 
 
\t \t \t  _rules = _sheet.cssRules; // Standards 
 
\t \t \t } 
 
     this.find = function (selector) { \t \t \t 
 
\t \t \t var i = _rules.length; 
 
\t \t \t while(i--){ 
 
\t \t \t \t if (_rules[i].selectorText == selector) { 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t \t if(i==0){break;} 
 
\t \t \t } 
 
\t \t \t //return _rules[i].cssText; 
 
\t \t \t return _rules[i].style; 
 
     } 
 

 
     this.set = function (foo) { 
 
      //to do 
 
     } 
 
    }; 
 

 
    return new CSS(); 
 
}; 
 
//init 
 
var css = new CSS(); 
 
//view the console. 
 
console.log(css.find(".regular"));//Note how the width property is blank 
 
//update elements with the results 
 
document.querySelector(".seventy").innerHTML = css.find(".seventy").width; 
 
document.querySelector(".pixels").innerHTML = css.find(".pixels").width; 
 
document.querySelector(".regular").innerHTML = css.find(".regular").width; 
 
//other tests 
 
document.getElementById("a").innerHTML = css.find("body").color; 
 
document.getElementById("b").innerHTML = css.find("h1").color; 
 
document.getElementById("c").innerHTML = css.find("h1").width; 
 
document.getElementById("d").innerHTML = css.find(".notInDom").color;

body { 
 
    font-family:sans-serif; 
 
    color:black; 
 
    background-color:#cccccc; 
 
} 
 

 
h1 { 
 
    color:blue; 
 
    font-size:1.5em; 
 
    font-weight:400; 
 
    width:70%; 
 
} 
 

 
.seventy, .pixels, .regular {display:block; border:1px solid red;} 
 

 
.seventy {display:block; border:1px solid red; width: 70%; } 
 
.pixels { width: 350px; } 
 
.regular {} 
 

 
.notInDom { 
 
    color:red; 
 
}

<h1>Find and Read Style Attributes Directly from the Stylesheet.</h1> 
 

 
<div class="seventy"></div> 
 
<div class="pixels"></div> 
 
<div class="regular"></div> 
 

 
<ul> 
 
    <li>css.find("body").color = <span id='a'></span></li> 
 
    <li>css.find("h1").color = <span id='b'></span></li> 
 
    <li>css.find("h1").width = <span id='c'></span></li> 
 
    <li>css.find(".notInDom").color = <span id='d'></span></li> 
 
</ul> 
 
<p>This is a work in progress and hasn't been tested in any meaningful way. Its messy and very limited.</p>

Answer 2

function getStyle(className) { 
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules; 
for (var x = 0; x < classes.length; x++) { 
    if (classes[x].selectorText == className) { 
     (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText); 
    } 
    } 
} 
getStyle('.test');