如果样式引用的元素尚未生成,是否可以从页面的外部CSS获取一个值?(该元素是动态生成的)。
我见过的jQuery方法是$('element').css('property');
,但这依赖于页面上的element
。有没有办法在CSS中找出属性的设置,而不是元素的计算样式?
我是否必须做一些丑陋的事情,比如在我的页面中添加一个隐藏的元素副本,这样我才能访问它的样式属性?
发布于 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"));
请注意,这是非常脆弱的,因为您必须提供与正在查找的规则匹配的完整选择器文本(它不会被解析),并且它不处理重复条目或任何类型的优先规则。对于我来说,当使用它时很难想到一个案例是一个好主意,但这里只是作为一个例子。
发布于 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; }
让我知道你的想法--你会修改它吗,如果是的话,是如何修改的?谢谢!
发布于 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);
}
});
https://stackoverflow.com/questions/2707790
复制相似问题