How can I tell if a CSS property was manually set by page author?

Question

I'd like to be able to tell if specific CSS properties (width, height, margin, padding, font-size, …) were set by the page author for a DOM element. My goal is to not change elements that have had their dimensions explicitly set, but to change those that have not.

function isPropertySet(elem, "width") should return true if the page author set the width CSS property either inline (style="width: 100px;") , or via a stylesheet.

This is not straightforward because the layout engine infers these values, and it seems that however I try to access them the browser has supplied values.

For instance, I've tried getComputedStyle(elem).getPropertyValue("width") , but this returns the computed width (not surprising given the name).

The style property, eg elem.style.width , isn't sufficient because it doesn't include properties set in stylesheets.

Before I go to the immense pain of searching through the stylesheets, does anyone have a better way?

Thanks!

Answer 1

If you want to supply default style set for the elements which were not customized, than the easiest way would be to create your own stylesheet and put it at the top, before any other CSS files . This way, every element customized elsewhere will overwrite your default styles. Be careful with the cascading order : not only your styles should precede every other, but the selectors should also be general enough.

If, on the other hand, for some reason you want to know through JavaScript whether the element was customized, then it's not possible, unless you want to compare the particular style with the default one, given that default styles may vary from browser to browser. For example, in Firefox, the default style for <h1/> is:

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

while Chrome has a slightly different style:

h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

This creates a problematic edge case. Imagine I want all <h1/> be font-weight:normal; font-size: 200%; font-weight:normal; font-size: 200%; , but there is one specific title on one specific page which I want to be exactly 2em and be displayed in bold. You'll think that the title is not customized, and override its style, while in fact, it was customized, the size and weight being set on purpose.

Answer 2

如果您不担心继承的样式而只关注特定的DOM元素，那么您可以动态创建特定的元素和类名（因此它只有CSS样式），然后使用上述方法检查它的宽度并进行比较？

Answer 3

The best way I have found to answer this question from JavaScript is to create a temporary element, that is not attached to the dom, and read my default values from that. I then test the default values against the values read from the element I'm testing (using jQuery or getComputedStyle) - if they compare then it's a best guess they haven't been set. Obviously this has a downside in the fact that if the element has had it's property set to the exact same value as the default you can't tell the difference.

Something like this

function hasDefaultStyle(elm, prop) {
  var def = $('<'+$(elm).attr('tagName')+' />').css(prop);
  return $(elm).css('prop') == def;
}

When dealing with different dimension metrics ie percent, cm, em and so on - these have to be dealt with in a different way—on browsers other than FireFox at least—due to the computed problem you mention.

FireFox does the right thing in my opinion and that when you request styles from an element that hasn't been placed in the dom it returns the original values ie like 50%.

For more information on how to solve at least the percent problem you can see my answer here:

Determine whether element has fixed or percentage width using JavaScript

It is rather ridiculous that such methods are necessary however :/