css - How to select elements with a style tag in IE6 with jQuery -
we have cms likes insert inline styles, have written code removes inline styles adds class , rewrites contents of style attribute style tag in head.
example html
<html> <head> <title>title</title> </head> <body> <div id="container"> <p style="width: 50%;">blah blah blah</p> <p style="font-weight: bold;">even more blah blah blah</p> <p>can blah blah blah</p> <p>ooo ahh blah blah blah</p> </div> </body> </html> jquery function
$.each($('#container [style]'), function(index, el){ var csstext = el.style.csstext; var classname = "auto-class-" + index; $(el).removeattr("style"); $(el).addclass(classname); $("<style type='text/css'> ." + classname + "{" + csstext + "} </style>").appendto("head"); }) desired result html
<html> <head> <title>title</title> <style type="text/css"> .auto-class-1 { width: 50%; } </style> <style type="text/css"> .auto-class-2 { font-weight: bold; } </style> </head> <body> <div id="container"> <p class="auto-class-1">blah blah blah</p> <p class="auto-class-2">even more blah blah blah</p> <p>can blah blah blah</p> <p>ooo ahh blah blah blah</p> </div> </body> </html> i browsers works expected, in ie6 jquery [style] selector seems grab elements inside #container. following instead.
result html in ie6
<html> <head> <title>title</title> <style type="text/css"> .auto-class-1 { width: 50%; } </style> <style type="text/css"> .auto-class-2 { font-weight: bold; } </style> <style type="text/css"> .auto-class-3 { } </style> <style type="text/css"> .auto-class-4 { } </style> </head> <body> <div id="container"> <p class="auto-class-1">blah blah blah</p> <p class="auto-class-2">even more blah blah blah</p> <p class="auto-class-3">can blah blah blah</p> <p class="auto-class-4">ooo ahh blah blah blah</p> </div> </body> </html> in example above doesn't cause issues on our website there on 300 dom nodes on given page it's mess.
the question how can select dom nodes style attribute in ie6.
also there easy way write rules 1 style tag rather having separate style tag each rule.
this isn't answer specific question asked, it is think should do.
you said in comment:
it's print style sheets. inline styles on overrule them, style tags fine.
the solution you're using (moving inline styles <style> elements) not elegant.
you'd better off adding !important every single declaration in print stylesheet.
body { color: #444 !important; padding: 0 !important; margin: 0 !important; } #menu { display: none !important; } yes, ugly, it's cleaner javascript-based solution.
if you'd background information:
see: http://css-tricks.com/specifics-on-css-specificity/
the !important value appended css property value automatic win. it overrides inline styles markup. way !important value can overridden !important rule declared later in css , equal or great specificity value otherwise.
Comments
Post a Comment