Changing css attribute value with jQuery

Question

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.

So you want it to apply to any a element that does not have a specific override with another CSS selector? — John Koerner
– John Koerner, Commented Jul 17, 2013 at 1:12
exactly , I must manipulate a{color:#ff6600;}<-- that value directly , — Benn
– Benn, Commented Jul 17, 2013 at 1:13

John Koerner · Accepted Answer · 2013-07-17 01:34:43Z

1

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/

edited Jul 17, 2013 at 1:34

answered Jul 17, 2013 at 1:18

John Koerner

38.2k8 gold badges92 silver badges142 bronze badges

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

4 Comments

Benn Over a year ago

nice one!, but again an issue , I cannot position it correctly, and I am using a tinycolor.js to have visitors change the colors , so once they start sliding that thing they end up with hundreds of styles, unless :) can we add an id to style tag ? must try this

Akheloes Over a year ago

add an id to style tag ? Why do that ?

Benn Over a year ago

than I can delete and load new one once they use tinicolor.js bgrins.github.io/TinyColor

John Koerner Over a year ago

I updated the fiddle / code to reflect an example where the color changes on every iteration.

acdcjunior · Accepted Answer · 2013-07-17 01:36:31Z

1

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.

answered Jul 17, 2013 at 1:36

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

Comments

Ghilas BELHADJ · Accepted Answer · 2013-07-17 01:18:34Z

0

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

answered Jul 17, 2013 at 1:18

Ghilas BELHADJ

14.3k10 gold badges61 silver badges106 bronze badges

1 Comment

Benn Over a year ago

I am not trying to target specific id or class as explained above

Collectives™ on Stack Overflow

Changing css attribute value with jQuery

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related