Determining at run-time which styles an element has implemented via JavaScript
I want to use JavaScript to get the computed style of an element whose style has been changed by a stylesheet. The element's style is not changed via inline CSS, meaning that the style property doesn't help at all. The only function I found in HTML that might help is getComputedStyle.
The problem with using getComputedStyle is that it returns all the properties of an element even if the stylesheet hasn't redefined it for that element.
For example, say I have the following stylesheet:
body {
font-size: 13px;
}
div {
color: blue;
}
.example {
font-weight: bold;
}
... and the following HTML:
<body>
<div>
This is a <span class="example">test</span>
</div>
</body>
When I run the following JavaScript on the span element:
window.getComputedStyle(spanElement)
... I get all the CSS attributes for that element:开发者_StackOverflow中文版
background-attachment: scroll; background-clip: border-box; background-color:
rgb(255, 255, 255); background-image: none; background-origin: padding-box;
[...]
text-anchor: start; writing-mode: lr-tb; glyph-orientation-horizontal: 0deg;
glyph-orientation-vertical: auto; -webkit-svg-shadow: none; vector-effect: none;
What I want is only the styles that the element has redefined (i.e. those which aren't inherited), in this example, it would be:
font-weight: bold;
Is there any easy way to get this information? If not, what would be the best way to get these results? Ideally I want a solution/algorithm which would be fast to run on hundreds of these elements.
Originally I thought I could loop over the node's parent elements and compare all the values to determine which ones aren't inherited, but it seems very inefficient to compare a hundred or so attributes for every single node. There are only a dozen or so different classes, but each one can occur hundreds of times, therefore, some sort of caching mechanism could improve performance dramatically.
My first idea of how to cache the values was to store the class name and its value (e.g. cachedValues['.example'] := 'font-weight: bold;'). The problem with this method is that CSS selectors can be very complicated. For example, some properties are inherited from their parents, meaning that a span not inside a div will be rendered differently in my original CSS example. So I thought I could include the parent in the cached values as well (e.g. cachedValues['div span.example'] := 'font-weight: bold;'). The problem here is that CSS selectors can get much more complicated with pseudo classes such as :first-child.
Example CSS:
div:first-child {
color: red;
}
div {
color: blue;
}
Example HTML:
<body>
<div>Red line</div>
<div>Blue line</div>
</body>
In this example, if I stored cachedValues['div'] := 'font-color: red;', it would be incorrect for the second line.
Do you have any suggestions as to how to tackle this problem?
You're gonna have to implement a CSS engine, which is not an easy task.
The guys from Firebug Lite have done it. You may want to have a look at their getElementRules and getInheritedRules methods.
Checkout these tests from Quirksmode.org. You should be able to access the stylesheets with document.styleSheets and parse that.
Of particular note are the cssText tests. They seem to grab all the rules of a particular selector.
Probably wat you can do is that , keep a separate javascript file (anyname.js) or may be inline script would also do and declare somthing lik this
$(document).ready(function () {
$('# ').each(function () {
$('# <div name>').css({ 'font-weight': 'bold' });
}
}
加载中,请稍侯......
精彩评论