Question

我正在尝试找到一种在HTML运行时修改CSS的方法，到目前为止，我发现只需使用下面这样的小脚本即可...

$("button").click(function(){
  $("p").css("color","red");
});

我可以理解这是在网页运行时修改引用我们的HTML的本地CSS样式表的有效方法（即按下div按钮）。

我要做的是修改jQuery插件的CSS样式表中的特定.class，以替换标准的右键单击上下文菜单。

我没有在JS中找到任何方法调用特定的样式表来修改任何.class或#id

所以我的HTML有以下定义：

<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<link rel="stylesheet" href="localstyle.css">

但是当我尝试用这样的脚本更新自定义jQuery CSS时

  $('#red').click(function(){
    $('.contextMenuPlugin').css({'background-color': 'white'});

无法识别

.contextMenuPlugin（jquery.contextmenu.css中的本机），该脚本仅使用我自己的样式表（localstyle.css）中的.class或#id。

我尝试使用嵌入在HTML中的本地CSS，并使用id引用jQuery CSS，但仍然没有任何变化。所以有来自jQuery插件的Github repo的链接：

我尝试现场直播，但JSfiddle在这个项目中根本不起作用，所以如果它有帮助或者有人想检查它，那么就会出现问题：

我希望有人帮我澄清一下，提前谢谢， 费德里科。

Answer 1

问题是你认为

$('.contextMenuPlugin').css({'background-color': 'white'});

使用

创建样式表

.contextMenuPlugin { background-color: white }

但它不是这样的。

$('.contextMenuPlugin')在您使用它的时刻获取类contextMenuPlugin的所有元素，然后.css({'background-color': 'white'})修改每个元素的内联样式。

这意味着，如果您在该代码之后使用类contextMenuPlugin创建新元素，则他们不会受到影响。

然后，你可以：

前段时间，我创建了一个向样式表添加所需规则的函数，并允许您引用和更改/删除它们。您可以在this answer中看到它。

Answer 2

您应该重新考虑您的解决方案。而是在样式表中添加一个具有所需CSS更改的附加类。

然后，单击该按钮，您可以调用addClass将其添加到相应的元素。

Answer 3

从<script>中取出<head>代码并将其放在<body>的末尾。

你也不需要这个：

$(function() { ... })

如果你已经有了这个：

$(document).ready(function() { ... })

换句话说，删除第29行和第27行（$(function() {和});） from this file