使用Javascript/jQuery从外部样式表获取CSS值
使用Javascript/jQuery从外部样式表获取CSS值
提问于 2010-04-25 17:47:33
如果样式引用的元素尚未生成，是否可以从页面的外部CSS获取一个值？(该元素是动态生成的)。
我见过的jQuery方法是$('element').css('property');，但这依赖于页面上的element。有没有办法在CSS中找出属性的设置，而不是元素的计算样式？
我是否必须做一些丑陋的事情，比如在我的页面中添加一个隐藏的元素副本，这样我才能访问它的样式属性？
回答 4
Stack Overflow用户
发布于 2013-05-28 03:51:19
通常，您应该让浏览器应用所有规则，然后向浏览器请求结果，但在极少数情况下，您确实需要从样式表中获取值，您可以使用以下命令：(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"));请注意，这是非常脆弱的，因为您必须提供与正在查找的规则匹配的完整选择器文本(它不会被解析)，并且它不处理重复条目或任何类型的优先规则。对于我来说，当使用它时很难想到一个案例是一个好主意，但这里只是作为一个例子。
Stack Overflow用户
发布于 2012-07-02 09:20:16
作为对Karim79的回应，我想我应该抛出我的函数版本的答案。我已经做了好几次了，所以我是这样写的：
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 .title{ margin-top:num; }让我知道你的想法--你会修改它吗，如果是的话，是如何修改的？谢谢!
Stack Overflow用户
发布于 2012-06-02 05:35:20
我已经编写了一个帮助器函数，它接受一个具有要从给定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);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2707790
复制相关文章
相似问题