Is it possible to overwrite styles declared in the head?

Posted on 2009-04-16
Last Modified: 2012-05-06
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.

Question by:paddycobbett
    LVL 5

    Assisted Solution

    you can overwrite the css of a certain element using this syntax:"10px";"bla";"blub";
    LVL 13

    Assisted Solution

    innerHTML wont change the CSS , instead the content.
    But it is not possible.
    LVL 29

    Assisted Solution

    by:David H.H.Lee
    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.

    LVL 13

    Assisted Solution

    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.
    LVL 1

    Accepted Solution

    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

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    Hide row when retrieving data from database 6 25
    Table append 4 13
    Hover Gone 16 16
    how can I referesh my page? 4 16
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now