javascript - 使用 javascript 修改超过 1 个 css 文件

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 链接:

https://github.com/joewalnes/jquery-simple-context-menu

我试着做一个 live，但是 JSfiddle 根本不能用这个元素工作，所以如果它有帮助或者有人想检查它，那么有一个问题的 pastebin:

http://pastebin.com/u/27GRiS (4 个文件)

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

Answer 1

问题是你认为

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

创建一个样式表

.contextMenuPlugin { background-color: white }

但事实并非如此。

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

这意味着，如果您在该代码之后创建类为 contextMenuPlugin 的新元素，它们将不会受到影响。

然后，您可以:

• 使用代码时确保目标元素存在
• 使用所需的 CSS 创建样式表

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