CODEWITHSUNDEEP
jquerycss
Benn
Benn

Reputation: 5023

Changing css attribute value with jQuery

This one is bit harder than 

$('a').css('color','#ff6600');

I am making a styleswitcher that must manipulate head a element css attribute 

<head>
HEAD TAGS
<style type="text/css">
a{color:#ff6600;}
 </style>
</head>

Reason why I cannot use $.css() is because it manipulates inline css style of any given a element on the page thus overriding for example menu hover link color or any other link color that is not originally ff6600.

Any help is appreciated.

Upvotes: 1

Views: 1557

Answers (3)

acdcjunior
acdcjunior

Reputation: 135822

You seem to be needing the functions from this article:

  • getCSSRule(): gets a CSS rule. You can edit it:

    var aCSS = getCSSRule('a'); // get the 'a' rule you mentioned.
aCSS.style.color = 'green'; // change its color to green
aCSS.style.textDecoration='underline overline'; // change it a little more

  • killCSSRule(): Deletes a CSS rule -- any objects on the page with that style will instantly become unstyled.

    killCSSRule('a');

  • addCSSRule(): straightforward: creates a new CSS rule.

    var someDiv = addCSSRule('#someDiv');
someDiv.style.fontWeight = 'bold';

Check this fiddle for the functions' codes and some usage example. Don't forget to check the article for details: Totally Pwn CSS with Javascript.

Upvotes: 1

John Koerner
John Koerner

Reputation: 38077

Add your new CSS to the head. Since you mentioned in your comment you want to switch it as the user changes it, you can create a style with an ID and then update it:

$("<style id='customStyle'></style>").appendTo("head");
$("#switcher").click(function () {
    var r=Math.floor(Math.random()*255);
    var g=Math.floor(Math.random()*255);
    var b=Math.floor(Math.random()*255);
    $("#customStyle").text("a {color:rgb(" + r + ", " + g + "," + b + ");}");});

See this fiddle:

http://jsfiddle.net/wdAGh/3/

Upvotes: 1

Ghilas BELHADJ
Ghilas BELHADJ

Reputation: 14124

You have to identify your link with an ID (or class of links with class), then you can target them more efficiently with jQuery, so your code must be like that:

<head>
    <!-- HEAD TAGS -->
    <style type="text/css">
       a{color:#ff6600;}
    </style>
</head>
<body>
    <a id="link1" href="#"> LINK 1</a>
    <a id="link2" href="#"> LINK 2</a>
</body>

Now, if you wanna only target LINK 1, you can do this in jQuery:

$('a#link1').css('color','#ff6600');

Upvotes: 0

Related Questions