jquery add css declarations?

Question

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

See: stackoverflow.com/questions/1348741/…

Diodeus - James MacFarlane
– Diodeus - James MacFarlane

2011-07-27 18:34:06 +00:00
Commented Jul 27, 2011 at 18:34 — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Jul 27, 2011 at 18:34

Variant · Accepted Answer · 2011-07-27 18:44:01Z

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 accomplish the same results: http://flesler.blogspot.com/2007/11/jqueryrule.html

edited Jul 27, 2011 at 18:44

answered Jul 27, 2011 at 18:36

Variant

17.4k4 gold badges44 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

willoller · Accepted Answer · 2011-07-27 18:51:56Z

4

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');

edited Jul 27, 2011 at 18:51

answered Jul 27, 2011 at 18:34

willoller

7,3801 gold badge38 silver badges63 bronze badges

Comments

Phil · Accepted Answer · 2011-07-27 18:36:17Z

0

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' });
});

answered Jul 27, 2011 at 18:36

Phil

11.2k18 gold badges73 silver badges106 bronze badges

2 Comments

Sparkup Over a year ago

hover() has 2 functions, background will not revert back.

Phil Over a year ago

Thank you for this, I have always just used a callback and didn't actually know that it wouldn't revert back.

Sparkup · Accepted Answer · 2011-07-27 18:46:08Z

0

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.

edited Jul 27, 2011 at 18:46

answered Jul 27, 2011 at 18:37

Sparkup

3,7522 gold badges38 silver badges50 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2011-07-27 19:45:18Z

-1

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.

edited Jul 27, 2011 at 19:45

answered Jul 27, 2011 at 18:32

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

2 Comments

ShankarSangoli Over a year ago

@Phil - He is asking whether it is possible to do it the way he wants. I answered it is not possible he has to do the way he is doing. I think I shouldn't get down vote for this. I didnt answer anything wrong here.

Phil Over a year ago

You didn't answer it wrong, but it's a complete waste of an answer. I'll remove the down vote if you edit it...

Collectives™ on Stack Overflow

jquery add css declarations?

5 Answers 5

Comments

Comments

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related