用javascript修改超过1个css文件答案

【问题标题】：Modify more than 1 css file with javascript用javascript修改超过1个css文件
【发布时间】：2014-01-31 23:12:36
【问题描述】：

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

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

我担心这是在网页运行时修改本地 CSS 样式表引用我们的 HTML 的有效方法（即按下 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 根本无法与这个项目一起工作，所以如果它有帮助或有人想检查它，那就是一个问题的 pastebin：

希望有人帮助我澄清这一点，提前致谢， 费德里科。

【问题讨论】：

【解决方案1】：

问题是你认为

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

创建一个样式表

.contextMenuPlugin { background-color: white }

但不是这样的。

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

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

那么，你可以：

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

【讨论】：

你有理由。没有带有类标签 .contextMenuPlugin 的元素！但是现在，如何从我的 HTML 索引中修改位于外部文件 jquery.contextmenu.js 中的类元素？
@sietedosfede 不确定你的意思。
抱歉我的误解，我想说的是如何修改将应用于右键单击脚本上下文菜单而不是 HTML 主页的自定义 CSS？它需要从 HTML 触发吗？原因，我可以在 web 未运行时修改 contextmenu 的 CSS 规则，刷新它并获取更改：但是在 web 运行时我不能做同样的事情，通过 CSS UI 来选择自定义样式...

【解决方案2】：

您应该重新考虑您的解决方案。相反，向您的样式表添加一个额外的类，该类具有您想要的 CSS 更改。

然后，在单击按钮时，您可以调用 addClass 将其添加到适当的元素中。

【讨论】：

问题是，该类只会将更改应用到我的 HTML 索引，而我正在尝试将 CSS 更改从 HTML 索引应用到右键单击上下文菜单的自定义 CSS。
这样的东西行不通吗？ $('#red').click(function(){ $('ul.contextMenuPlugin').addClass('newClass'); });

【解决方案3】：

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

你也不需要这个：

$(function() { ... })

如果你已经有了这个：

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

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

【讨论】：

你说得对，但是将脚本放在正文而不是头部有什么区别？感谢您的评论！
脚本在 DOM 完全加载之前运行，并且在执行时元素不在那里进行更改。此外，这是一种减少加载延迟的常见做法，因为首先运行脚本会阻止 DOM 的其余部分加载，直到它完成（减去 ASYNC 函数）。将它放在正文的末尾允许 DOM 加载并且脚本可以查找。