javascript - jquery add css declarations? - Stack Overflow

admin管理员组

文章数量:1312936

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

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

• javascript
• jquery
• css
• hover

Share Improve this question Follow edited Nov 29, 2011 at 10:25 Variant 17.4k44 gold badges4343 silver badges6767 bronze badges asked Jul 27, 2011 at 18:28 user429620user429620 1

• 1 See: stackoverflow./questions/1348741/… – Diodeus - James MacFarlane Commented Jul 27, 2011 at 18:34

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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 acplish the same results: http://flesler.blogspot./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/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.

本文标签： javascriptjquery add css declarationsStack Overflow