Получить процентное значение CSS с помощью jQuery

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 

Есть ли что-нибудь в jQuery, котор я могу использовать для достижения этого эффекта? Или индивидуальный подход к нему?

Answer 1

Вы можете разобрать документ. Таблицы, чтобы найти соответствие. Обратите внимание, что это вернет только фактический стиль после, который проанализировал его, поэтому он не нужен для получения необработанного 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');