使用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

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');

Answer 2

您可以解析document.stylesheets以查找匹配项。注意，这只会在浏览器解析之后返回的实际样式，因此无法获取文件中写入的原始未掺杂CSS。为此，您需要解析文件本身而不是document.stylesheets。

此代码陈旧且未经测试，因此您的里程可能会有所不同。我不知道它对继承值或更复杂的选择器的表现如何。

//TEST PARSE CSS
var CSS = function () {
    var _sheet;
    var _rules;
    function CSS() {
        _sheet = document.styleSheets[0];
	        if (_sheet.rules) {
			    _rules = _sheet.rules; // IE
			} else {
			    _rules = _sheet.cssRules; // Standards
			}
        this.find = function (selector) {			  
			var i = _rules.length;
			while(i--){
				if (_rules[i].selectorText == selector) {
					break;
				}
				if(i==0){break;}
			}
			//return _rules[i].cssText;
			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>