jQuery losing styles on $(html_with_inline_styles)

Question

In Firefox 3.6 (Firebug console), doing

$('<div style="-x-foo:bar;color:red;" />').attr("style")

results in

"color: red;"

Why are the non-recognized style rules lost?

Answer 1

There is no defined action for what a browser should do with unrecognised rules. Some browsers may add them to the DOM but ignore them, others may drop them entirely.

Firefox is one of those that drops unknown rules.

You may have different results in other browsers. The point is that it's undefined, so will be hard to predict what's going to happen, even between versions of the same browser.

I guess the real question is: What is the unrecognised rule you're trying to specify? You're clearly trying to do some kind of clever trick here, and I doubt that the answers you've been given to the question will be the answer you were looking in order for your clever trick to work. Perhaps if you described what it was you were trying to achieve with this unrecognised rule, we could help you find a way of achieving it, especially since your current plan doesn't seem likely to pan out.

Answer 2

jQuery will create a new DOM element. Firefox will parse the style attribute of that element and ignore anything it doesn't understand.

It's worth noting that Chrome doesn't remove attributes like this.

Try this link to test this behaviour in different browsers - thanks ILMV!

Answer 3

The browser discards properties it does not recognise when it creates the node and sets the attribute values.

When you get a serialisation of what the browser holds in memory, they no longer exist.