在 jQuery 脚本之后更改 <style>答案

【问题标题】：Change <style> after jQuery scripts在 jQuery 脚本之后更改 <style>
【发布时间】：2018-02-02 23:16:07
【问题描述】：

我加载了一个站点，使用 jQuery 脚本在页面加载时获取标题的背景颜色（由$(document).ready(function(global) 提示），并希望将此值输入到表格的背景样式属性中。

表的属性当前使用<style> / </style> 标签定义，它在脚本获得所需值之前运行。因此，存储的颜色变量不能输入到<style>标签中，因为<script>是在<style>标签运行之后运行的。

问题是我如何在<script> 运行后获取一部分代码来运行<style> 标签，以便我可以将存储的变量输入到标签中。

我知道这似乎有点落后，但是我正在处理的应用程序具有非常严格的参数，并且必须在加载后定义颜色变量。颜色的后端编码是不可能的，因为它们存储在临时缓存文件中，所以我仅限于我所描述的情况。

【问题讨论】：

标签： jquery css styles

【解决方案1】：

您不使用 jQuery 来更改样式表，而是使用它与 DOM 交互，就像样式表一样。

您使用 .style property 对样式进行更改。

以下示例显示使用.backgroundColor 更改背景：

var headerColour = document.getElementById('header').style.backgroundColor;
var element = document.getElementById('element');
element.style.backgroundColor = headerColour;

#element {
  height: 100px;
  width: 100px;
  background: red;
}

<div id="header" style="background-color: green"></div>
<div id="element"></div>

请注意，CSS 说正方形应该是红色的，但 JavaScript 说正方形应该是绿色的。结果它变成绿色。通过 JavaScript 完成的样式将在通过 CSS 应用样式之后自动应用（如上所示）。

希望这会有所帮助！ :)

【讨论】：

我没有用jquery改变样式，我用jquery定义了一个全局属性，因为我需要抓取标题颜色。然后我需要使用该全局变量来定义表格的背景颜色，并且我需要在页面加载之前完成此操作，以便在脚本运行时颜色不会闪烁。
你做的事情很相似；您将标题的颜色存储为变量，并使用.style 将表格颜色的值设置为该变量。我已经更新了我的答案以准确展示这一点。
好的，我想出了如何使用 .style 现在的问题是让 jquery 脚本在页面显示之前运行，因为表格显示为白色，然后很快改变颜色，但看起来仍然不专业。这不能在 html 标签中完成，因为我无权访问 body 标签
您总是可以访问body标签；它总是存在的。如果您希望它立即显示，只需修改 CSS 本身。 JavaScript 将总是在 CSS 之后加载；没有办法让它先运行。
但我偷偷摸摸把尸体藏了起来，直到 JS 跑了。像魅力一样工作。