jquery add css declarations?

Is it possible with jquery to add new style declarations?

For example, pass:

{ "body": { "font-size": "12px" }, "table": { "xyz": "123" } }

etc etc

to a function I don't know without having to select those elements and do it like this:

$('body').css({"font-size": "12px"});
$('table').css({"xyz": "123"});

And second part of the question, is it possible to set css for the :hover pseudo class with jquery or开发者_如何转开发 do I need to use the .hover() function? If possible I just want css applied and not have to deal with on mouse in / out functions.

$('#element').find('a.thumbnail:hover').css({'background-color': '#efefef' });

does not work.

Thanks, Wesley

You can alter the stylesheet itself with pure javascript through the document.stylesheets collection. see more here: http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets

You can also use the jQuery plugin jRule to accomplish the same results: http://flesler.blogspot.com/2007/11/jqueryrule.html

Answer to part 1:

You would have to define a function to do that - try something like this:

function styleit(json)
{
    //loop through the json
    $.each(item, function(i, style){
      //apply styles
      $(i).css(styles);
    }
}

Answer to part 2:

I would put the css declaration in a class like:

.active a.thumbnail:hover { background-color: #efefef; }

Then use javascript to toggle the class in a parent element's context

$('#element').addClass('active');

For the first part, you are correctly adding styles to the body and table tags.

For the second part, this solution, while using .hover() seems to be a easier solution:

$('#element').hover(function() {
    $(this).css({'background-color': '#efefef' });
});

Try this :

$('a.thumbnail').hover(
    function(){
        $(this).css({'background-color':'#efefef'});
    },
    function(){
        $(this).css({'background-color':'normal-color'});
    }
);

Example : http://jsfiddle.net/jfhpg/1/

Hope it helps.

You have to do it by selecting the dom element only. Also in order to set the hover styles you have to either set the styles using css or add/remove class names.