Jac*_*kin 27 javascript css jquery
这是一个非常简单的问题,所以我会保持简短:
如何判断特定DOM元素的CSS属性是否被继承？
我之所以这么问是因为jQuery的css方法,它会返回计算样式,它继承父对象的CSS属性.有没有办法检索对象本身设置的属性？
一个例子可以解释我得到的更好的东西:
CSS:
div#container {
color:#fff;
}
HTML:
<div id="container">
Something that should be interesting
<div class="black">
Some other thing that should be interesting
</div>
</div>
那么,在div.black继承的实例中,color如何判断它是否被继承？
$('div.black:eq(0)').css('color')显然会给我#fff,但我想要检索元素本身的风格,而不是它的父母.
Anu*_*rag 10
实际确定CSS样式是否继承或元素本身设置,你就必须实现该浏览器适用于确定一个元素在一个特定的风格中使用值的确切规则.
CSS选择器可能并不总是遵循可能简化问题的父子关系.考虑这个CSS.
body {
color: red;
}
div + div {
color: red;
}
和以下HTML:
<body>
<div>first</div>
<div>second</div>
</body>
无论first和second西港岛线显示为红色了,但是,第一个div是红色的,因为它继承父它.第二个div为红色,因为div + divCSS规则适用于它,更具体.看着父母,我们会看到它有相同的颜色,但这不是第二个div得到它的地方.
除getComputedStyle界面外,浏览器不会公开任何内部计算.
一个简单但有缺陷的解决方案是从样式表中运行每个选择器,并检查给定元素是否满足选择器.如果是,则假设样式直接应用于元素.假设您想要浏览第一个样式表中的每种样式,
var myElement = $('..');
var rules = document.styleSheets[0].cssRules;
for(var i = 0; i < rules.length; i++) {
if (myElement.is(rules[i].selectorText)) {
console.log('style was directly applied to the element');
}
}
我不认为你可以告诉我们,如果给定的风格是继承,我认为你能做的最好是设置给定CSS属性设置为"继承",捕捉到它的计算值,并将其与原来的价值.如果它们不同,那么风格绝对不会被继承.
var el = $('div.black:eq(0)');
var prop = el.css("color");
el.css("color", "inherit");
var prop2 = el.css("color");
el.css("color", prop);
if(prop != prop2)
alert("Color is not inherited.");
关键在于:如果在CSS中将div.black设置为#fff或通过内联样式,此方法将考虑继承.在我看来,这并不理想,但它可能适合您的需求.我担心完美的解决方案需要遍历整个样式表.
| 归档时间： |
|
| 查看次数： |
7049 次 |
| 最近记录： |