CODEWITHSUNDEEP
javascriptcss
steelthunder
steelthunder

Reputation: 438

Overriding CSS from element.style created by server side JS

I have a reference to a server side JS file that dynamically creates divs on my page. I am trying to override the css that is inline for the divs that are created but I have not been able to do so.

I have tried !important and the style that is created by the JS still trumps everything I do.

When i look at the style in the developer console of chrome it shows element.style as being the style that "won" over my style I do not have access to edit the JS file on the server.

I place this in my page and it dynamically creates the divs and styles them. 

<head>

<style>
#id
 {
    background-color: blue; !important; 
    display:block; !important;  
}
.class
 {
    background-color: blue; !important; 
}

</style>

</head>


<script src="http://xxx/xxx/xxxxx/xxxx.ashx?blank=xxxx" type="text/javascript" charset="utf-8"></script>

Upvotes: 0

Views: 1431

Answers (3)

Chris Morledge
Chris Morledge

Reputation: 71

The CSS !important tag does sound like your answer here but sometimes you need to ensure your CSS declaration is specific enough to the element, i.e.:

<div>
<a style="color:#F00;">A Link</a>
</div>

If I apply the below CSS the inline style or #F00 will still win:

div {color:#fff !important;}

But if I am specific with my CSS declaration i.e:

div a {color:#000 !important;} <--Notice the 'a' tag

Then my link will be #000. This does not matter if the link was loaded in with JavaScript or not.

See my JSFiddle Example: http://jsfiddle.net/zqpy0r6c/

More technical info can be found at When does CSS's !important declaration not work?

Upvotes: 1

eman.lodovice
eman.lodovice

Reputation: 192

You can create your own javascript to restyle the divs created by the server javascript.

Upvotes: 1

caffeinated.tech
caffeinated.tech

Reputation: 6548

The CSS given in the style attribute on an element always wins over the stylesheets. The best option to override this CSS is to edit the style attribute using some JS:

<script>
    function clearInlineStyling(element){
        element.style= null;
    }

</script>

Next you have to watch the html for your script to add new elements, find them and remove their styling. I would suggest JQuery for this.

Upvotes: 0

Related Questions