使用Javascript / jQuery从外部样式表获取CSS值
如果样式引用的元素尚未生成，是否可以从页面的外部CSS获取值？ （该元素将被dynamic生成）。
我见过的jQuery方法是$('element').css('property'); ，但是这依赖于页面上的element 。 有没有办法找出什么属性是设置在CSS内而不是一个元素的计算风格？
我会不得不做一些丑陋的事情，像添加元素的隐藏副本到我的页面，以便我可以访问它的样式属性？
使用jQuery：
// Scoping function just to avoid creating a global (function() { var $p = $("<p></p>").hide().appendTo("body"); console.log($p.css("color")); $p.remove(); })();
p {color: blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
通常情况下，你应该让浏览器应用所有的规则，然后问浏览器的结果，但在极less数情况下，你真的需要从样式表中获取值，你可以使用这个：（ JSFiddle ）
function getStyleSheetPropertyValue(selectorText, propertyName) { // search backwards because the last match is more likely the right one for (var s= document.styleSheets.length - 1; s >= 0; s--) { var cssRules = document.styleSheets[s].cssRules || document.styleSheets[s].rules || []; // IE support for (var c=0; c < cssRules.length; c++) { if (cssRules[c].selectorText === selectorText) return cssRules[c].style[propertyName]; } } return null; } alert(getStyleSheetPropertyValue("p", "color"));
请注意，这是非常脆弱的，因为您必须提供与您正在查找的规则相匹配的完整select器文本（不会被分析），并且不会处理重复条目或任何types的优先规则。 我很难想到使用这种方法是一个好主意，但这里只是一个例子。
为了回应Karim79，我只是觉得我会抛弃这个答案的function版本。 我必须做好几次，所以这就是我写的：
function getClassStyles(parentElem, selector, style){ elemstr = '<div '+ selector +'></div>'; var $elem = $(elemstr).hide().appendTo(parentElem); val = $elem.css(style); $elem.remove(); return val; } val = getClassStyles('.container:first', 'class="title"', 'margin-top'); console.warn(val);
这个例子假定你有和class =“container”的元素，并且你正在寻找那个元素中的标题类的margin-top样式。 当然要改变以适应你的需求。
在样式表中：
.container .title{ margin-top:num; }
让我知道你的想法 – 你会修改它，如果是的话如何？ 谢谢！
我已经写了一个帮助函数，它接受一个对象的css属性，从给定的css类中检索并填充实际的css属性值。 包括的例子。
function getStyleSheetValues(colScheme) { var tags=''; var obj= colScheme; // enumerate css classes from object for (var prop in obj) { if (obj.hasOwnProperty(prop) && typeof obj[prop]=="object") { tags+= '<span class="'+prop+'"></span>'; } } // generate an object that uses the given classes tags= $('<div>'+tags+'</div>').hide().appendTo("body"); // read the class properties from the generated object var idx= 0; for (var prop in obj) { if (obj.hasOwnProperty(prop) && typeof obj[prop]=="object") { var nobj= obj[prop]; for (var nprop in nobj) { if (nobj.hasOwnProperty(nprop) && typeof(nobj[nprop])=="string") { nobj[nprop]= tags.find("span:eq("+idx+")").css(nobj[nprop]); } } idx++; } } tags.remove(); } // build an object with css class names where each class name contains one // or more properties with an arbitrary name and the css attribute name as its value. // This value will be replaced by the actual css value for the respective class. var colorScheme= { chart_wall: {wallColor:'background-color',wallGrid:'color'}, chart_line1: { color:'color'} }; $(document).ready(function() { getStyleSheetValues(colorScheme); // debug: write the property values to the console; if (window.console) { var obj= colorScheme; for (var prop in obj) { if (obj.hasOwnProperty(prop) && typeof obj[prop]=="object") { var nobj= obj[prop]; for (var nprop in nobj) { if (nobj.hasOwnProperty(nprop)) { console.log(prop+'.'+nprop +':'+ nobj[nprop]); } } } } // example of how to read an individual css attribute value console.log('css value for chart_wall.wallGrid: '+colorScheme.chart_wall.wallGrid); } });
