CODEWITHSUNDEEP
javascripthtmlcssrss
user3821345
user3821345

Reputation: 648

Is it possible to override CSS in js

I am using a link generated from a RSS converter (webrss.com), which sits inside a javascript tag at the end of my html. I have needed to convert an RSS feed to HTML for displaying on some digital signage. It works great, except I am having trouble overriding its default styles. I can change .li and .a styles but not font-size in the body or html tags.

I have looked everywhere for a solution and have tried using !important in my CSS but it isn't working. I would like to use an external style sheet and have it override all styles in the js tag at the end of my html.

Is this possible? I'm new to this and am stuck, please help!

Upvotes: 1

Views: 2582

Answers (3)

James Yang
James Yang

Reputation: 1416

The best way to override rule in JS is using CSSOM, I found this lib may help:

https://github.com/cssobj/cssobj

It's render CSSOM from JS, and you can change rules directly from JS.

Upvotes: 0

ShaneQful
ShaneQful

Reputation: 2236

Possible they are setting some of the styles inline on the elements eg. <span style="font-size:12px">contents</span> using JS themselves. If they are, there is no way to override it with CSS you'll have to use js your self to override their styles.

Upvotes: 1

SweetTomato
SweetTomato

Reputation: 569

Basically, specificity and valid css can be your issue.

Specificity: You can inspect element to see what styles are applying. Assuming your css code is valid, it will show up for the selected element, below the css rules taking precedence above your own. Something like "li {font-size: 11px !important;}" should take precedence above all others, unless there is a more specific selector using the important piece as well.

Validity: For all html elements (li, a, body, html), you select them by just writing them out (ie "html {color: red;}" NOT ".html {color: red;}". I see you've mentioned .li and .a in your question, which may have just been an accident. Note that the dot is not necessary unless it is a class name assigned (ie. ). Check if your css is even listed in the inspector for that element to check if your css is valid.

You can override inline styles with css. The important tag trumps the inline style. See http://css-tricks.com/override-inline-styles-with-css/

Upvotes: 0

Related Questions