通过Javascript添加CSS

Question

I am trying to add some CSS styling (in addition to the styles already in place) via Javascript (simply because i do not have access to the main CSS file)

http://jsfiddle.net/pbPyU/

HTML:

<a class='store-locator-button'>replace me</a>

JAVASCRIPT:

$(function() {
$('.store-locator-button').addClass('tempstorebutton');
$("a.store-locator-button").each(function(index,el){
    $(el).text('BUSCAR UNA TIENDA');
  }); 
});

CSS:

.tempstorebutton{padding:5px; color:#fa5dae;}

It works fine in JSfiddle, but not on my site. Any suggestions?

Answer 1

The order in which CSS is applied is important. You should add your JavaScript code at the bottom of the page to make sure it gets applied in case some other styles are already applied before hand. Try !important property too in case your CSS is overriden.

Answer 2

I would recommend having your own css file being rendered after the one you want to override.

Then you should add those classes that you want to override on your css file with the styles that you want. Otherwise it's a frustrating path you should avoid.

!important declarations should not be used unless they are absolutely necessary.

Answer 3

Every browser has default css settings. You must override css.

• one approach is to reset css: reset css example
• another approach is to override only the parts you need css with !important

keep in mind that in css the more specific is on a higher priority to render

you can also try to check if the css changes you make appear with changing the css code in firefox firebug or google chrome developer or your browser debugging interface and than you can see if your css tweeks work for real or not.

you can also try to give the class a different name.

hope it helps feel free to correct and edit anyone