使用 JavaScript 通过 ID 创建、修改、禁用多个 CSS 规则

问题描述 投票：0回答：1

摘要

我正在尝试找出一种使用 JavaScript 在页面上动态创建 CSS 规则、修改它们并禁用它们的方法。这些规则将出现在带有 ID 和一组可能重叠的一个或多个 CSS 规则的“包”中。

示例和数据

/*ID: something*/
div#foobar {display:none;}

/*ID: blah*/
input {background:red;}
div.password {width:100px;}

/*ID: test*/
div.password {width:200px;}

规则位于包含数据的关联数组中，例如：

myrules["something"] = "div#foobar {display:none;}";
myrules["blah"]      = "div.password {width:100px;} input {background:red;}";
myrules["test"]      = "div.password {width:200px;}";

“问题”

现在我需要一种方法将定义的规则添加到页面，并使用 ID 来切换它们。

要求

当前尝试（如下）遇到的主要问题是：

  • 通过CSS语法添加CSS规则（即不是JavaScript对象名称，所以
    background-color
    ，而不是
    .backgroundColor
    ）
  • 能够启用和禁用规则
  • 能够通过字符串 ID（而不是数字索引）访问规则
  • 规则应该集中在单个样式表对象或元素中，因为可能有很多规则，因此为每个规则创建单独的样式表元素是不切实际的

尝试（我已经尝试过的）

我研究了从

document.styleSheets
到
.sheet.cssRules[]
，从
.innerHTML
到
insertRule()
的几种不同方式。我因为试图弄清楚什么是什么而变得头晕；这是一个泥沼，例子很少。有时我设法使用一种技术来完成它的一个方面，但另一方面却不起作用。我找不到满足上述所有要求的解决方案。

搜索很困难，因为措辞含糊不清，导致搜索结果不正确。



当然必须有一种有效的方法来做到这一点，对吧？ 🤨

javascript css dynamic
1个回答
0
投票

您可以在 

<style>
标签内创建一个 
<head>
元素，并根据需要更改其内容。 可能还有其他方法可以做到这一点，但是，如果我正确理解您的要求，下面的示例可能会有所帮助：

// Your CSS rules
let myRules = {
  something: "div#foobar {display:none;}",
  blah: "div.password {width:100px;} input {background:red;}",
  test: "div.password {width:200px;}"
}

// Create the style element
let style = document.createElement("style")
// Give it a unique id in case there are other style elements
style.id = "myStyle"
// Append the created style element to <head>
document.head.appendChild(style)

// Example function to change the contents of the new style tag by passing the needed style values as arguments
function changeStyle(...args) {
  const myStyle = document.head.querySelector('style#myStyle')
  
  myStyle.innerText = args
}

document.getElementById("changeStyleButton1").addEventListener('click', () => {
  changeStyle(myRules["test"])
})

document.getElementById("changeStyleButton2").addEventListener('click', () => {
  changeStyle(myRules["blah"])
})

document.getElementById("changeStyleButton3").addEventListener('click', () => {
  changeStyle(myRules["something"] + myRules["test"])
})

changeStyle(myRules["something"] + myRules["blah"])
<html>
<head>
</head>
<body>

<div id="foobar">foobar div</div>
<div class="password">
  <input type="password">
</div>
<p>
<button id="changeStyleButton1">Change Style 1</button>
<button id="changeStyleButton2">Change Style 2</button>
<button id="changeStyleButton3">Change Style 2</button>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.