1

这个有点难

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

我正在制作一个样式切换器，它必须操纵 head 元素 css 属性

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

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

任何帮助表示赞赏。

4

3 回答 3

1

您似乎需要本文中的功能：

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

检查这个小提琴函数的代码和一些使用示例。不要忘记查看文章以获取详细信息： Totally Pwn CSS with Javascript。

于 2013-07-17T01:36:31.057 回答
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/

于 2013-07-17T01:18:41.600 回答
0

你必须用一个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>

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

$('a#link1').css('color','#ff6600');
于 2013-07-17T01:18:34.983 回答