[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1000
  • Last Modified:

Is it possible to overwrite styles declared in the head?

I need to overwrite styles declared in the head, to simplify and avoid doubt about what i mean:

<style id='tmplcss'> .. some css .. </style>
.. etc etc

Notice i've given the <style> tag an id, which successfully allows me to reference it, and even query it's content. HOWEVER, to my disappointment i'm NOT able to replace the inner content.

var g=document.getElementById('tmplcss');

"Alerts" the css content no problem, however:

.. has no effect, and think is illegal. Before i choose another course of action i wanted to know if what i'm trying to do is possible. I basically want to overwrite the css with some new css, in the hope that the page reflects the css changes. Can anyone explain how this is done, or perhaps explain why this isn't supproted, or is it just not supported yet?? I've only tested on my current browser IE7.

5 Solutions
you can overwrite the css of a certain element using this syntax:
innerHTML wont change the CSS , instead the content.
But it is not possible.
David H.H.LeeCommented:
Hi paddycobbett,
>>..HOWEVER, to my disappointment i'm NOT able to replace the inner content.
Any specified reason to override available CSS? Normally, the CSS layout is change to different CSS class name instead of wipe out the other CSS.
Let said you have 5 CSS classname and each of the defined CSS is referred by different control. So, you may need to change the existing CSS classname to differ CSS classname. You can change it via client script accordingly.  
 //.... CSS class name 1

 //.... CSS class name 2

 //.... CSS class name 3

 //.... CSS class name 4

 //.... CSS class name 5

Initial page design
<input type=text id="txt" class="class1" />

Alter via client script(eg: javascript) under some different circumstance:
document.getElementById("txt").className="class2";//change CSS classname

More details:

If you insist going to clear the entire CSS, the easiest way is put the entire stylesheet as external CSS file, then re-load the external CSS source if required. That'll ease up your job as required.

Css has strict rules about what style is applied to a certain element.

* Styles and stylesheets in the head are read first.
* Later styles and stylesheets overrule earlier ones.
* Styles applied inline (like <tr style="background: #c00;">) overrule every other rule.
* A style applied using an ID overrules a class style
* A style applied using a class overrules a general classe style (like h1 { font-size: 18px; })

I'm not 100% sure if this covers everything (probably not), but I hope this helps you a bit further.
paddycobbettAuthor Commented:
Thanks for the many responses.. i actually found a nice solution. For those trying to do the same thing or just curious: since i can't change the css text inside the <style> directly, by assigning an id to the style i was able to reference it, and thereby remove it from the DOM, and replace it with another <style> with the same, my code solution just a single line using jQuery.

var cssStuff=$("<style id='tmplcss'>" + data + "</style>");                                   

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now