How to add property to existing class

Question

I have got a CSS class like so:

.simpleClass {
    width: 25px;
}

And I have a matching element:

        
                      

              相关标签:
       
      

Answer 1

$(document).ready(function(){
    $(.simpleClass).css('display','none');
});

Answer 2

you can specify the style of the element by using .css like

$("div.simpleClass").css("width","25px");

have a look at jQuery.css()

Answer 3

If I get it right, You don't want to give property to the instance element of simpleClass, but would like to give an extra property to the whole class ( covering all instances ) using JS.

In this case, You can use jQuery to append a style element to the head, giving You the opportunity to add additional CSS declarations.

However, I would not recommend this, because it causes Your code, and structure to get messy.

$("head").append("<style> .simpleClass{ display:none; } </style>");

This snippet will give extra display:none property to all .simpleClass elements existing in the time of doing this, and will also affect every later-inserted .simpleClass elements.

Answer 4

$('.simpleClass').css({display:'none'});

Answer 5

The property will be added to div if it already not exist in css class. Hence, it's always better to switch css class with new properties. Eg.

$( ".referenceClass" ).switchClass( "oldClass", "newClass");

Answer 6

The stylesheet is defined in a file, and you can't edit that with JavaScript. What you could do is this:

$(".simpleClass").live("domchanged", function() {
    $(this).css("display", "none");
});

But this is neither not cross-browser compatible nor efficient (nor tested by me ;). So I'd propose to use another predefined CSS class for this purpose. Why do you need something like this anyway?