Question

.test {
    width:80px;
    height:50px;
    background-color:#808080;
    margin:20px;
}

HTML -

<div class="test">Click Here</div>

在JavaScript中我想获得margin:20px

Answer 1

对于现代浏览器，您可以使用getComputedStyle：

var elem,
    style;
elem = document.querySelector('.test');
style = getComputedStyle(elem);
style.marginTop; //`20px`
style.marginRight; //`20px`
style.marginBottom; //`20px`
style.marginLeft; //`20px`

margin是一种复合风格，而不是可靠的跨浏览器。应单独访问-top -right，-bottom和-left中的每一个。

fiddle

Answer 2

我刚刚为此目的发布了一个npm包。你可以在npm或github上找到它：

npm：https://www.npmjs.com/package/stylerjs

github：https://github.com/tjcafferkey/stylerjs

你会像这样使用它

var styles = styler('.class-name').get(['height', 'width']);

和样式相等

{height: "50px", width: "50px}

所以你可以得到像这样的值

var height = styles.height;

Answer 3

可接受的答案是获取计算值的最佳方法。我个人需要预先计算的值。假设将“ height”设置为“ calc（）”值。我编写了以下jQuery函数来访问样式表中的值。该脚本处理嵌套的“媒体”和“支持”查询，CORS错误，并应为可访问的属性提供最终的级联预计算值。

$.fn.cssStyle = function() {
		var sheets = document.styleSheets, ret = [];
		var el = this.get(0);
		var q = function(rules){
			for (var r in rules) {
				var rule = rules[r];
				if(rule instanceof CSSMediaRule && window.matchMedia(rule.conditionText).matches){
					ret.concat(q(rule.rules || rule.cssRules));
				} else if(rule instanceof CSSSupportsRule){
					try{
						if(CSS.supports(rule.conditionText)){
							ret.concat(q(rule.rules || rule.cssRules));
						}
					} catch (e) {
						console.error(e);
					}
				} else if(rule instanceof CSSStyleRule){
					try{
						if(el.matches(rule.selectorText)){
							ret.push(rule.style);
						}
					} catch(e){
						console.error(e);
					}
				}
			}
		};
		for (var i in sheets) {
			try{
				q(sheets[i].rules || sheets[i].cssRules);
			} catch(e){
				console.error(e);
			}
		}
		return ret.pop();
	};
  
  // Your element
  console.log($('body').cssStyle().height);

Answer 4

使用jQuery：

   $('.class').css( "backgroundColor" );

如何在Javascript中获取CSS类属性？

4 个答案: