Question

这个比

更难

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

我正在制作一个必须操纵头部元素css属性的样式开关

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

我不能使用$ .css（）的原因是因为它操纵了页面上任何给定元素的内联css样式，从而覆盖了例如菜单悬停链接颜色或原本不是ff6600的任何其他链接颜色。

感谢任何帮助。

Answer 1

将新CSS添加到头部。由于您在评论中提到要在用户更改时将其切换，您可以创建带有ID的样式，然后更新它：

$("<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 + ");}");});

看到这个小提琴：

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

Answer 2

您似乎需要this article中的功能：

getCSSRule() ：获取CSS规则。你可以编辑它：

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() ：删除CSS规则 - 页面上具有该样式的任何对象都会立即变为无样式。
```
killCSSRule('a');
```

addCSSRule() ：直截了当：创建新的CSS规则。

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

Check this fiddle 了解功能代码和一些使用示例。不要忘记查看文章了解详情：Totally Pwn CSS with Javascript。

Answer 3

您必须使用ID（或class的链接类别）来标识您的链接，然后您可以使用jQuery更有效地定位它们，因此您的代码必须是这样的：

<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>

现在，如果您只想定位LINK 1，可以在jQuery中执行此操作：

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

使用jQuery更改css属性值

3 个答案: