从字符串数组应用多个 CSS 规则？

Question

我目前为我的 jQuery 请求设置了以下设置，这意味着在页面上查找 ID 为“myid”的元素并对其应用新的 CSS 规则。这些规则事先不知道，所以我首先读取一个文件并将结果存储在一个字符串数组中，偶数索引是规则，奇数索引是值。然而，jQuery 拒绝让这个工作。我翻遍了文档无济于事，我得到的只是显然 words[0] 是 string[] 类型，而不是 string（不应该是这种情况）。

我能得到一些建议吗？这是我的意思的一个例子：

var words = ["color", "blue", "font-size", "100"]; // these have been parsed from a file and formatted

$("#myid").css({words[0] : words [1], words[2], words[3]}); // This won't apply

Answer 1

我认为这段代码会对你有所帮助。我仅在此页面上对其进行了测试。:)var words = ["color", "blue", "font-size", "100"];for (var i = 0; i < words.length; i += 2){&nbsp; $("#mainbar").css(words[i], words[i+1]);}此循环将帮助您添加任意数量的规则，因为您正在动态读取它们。

Answer 2

一种方法是首先构建 css 对象并将其传递给 jQuery 函数：let words = ["color", "blue", "font-size", "100"]; // these have been parsed from a file and formattedconst cssObj = {};words.forEach((el,idx,arr) => {&nbsp; &nbsp;if(!(idx % 2) && (idx + 2 <= arr.length) ){&nbsp; &nbsp; &nbsp;cssObj[el] = arr[idx + 1]&nbsp;&nbsp; &nbsp;}});$("#myid").css(cssObj); // This won't apply<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="myid">MyId Div</div>

Answer 3

这是一种将 CSS 组合到一个对象中以一次性应用它的方法：const words = ["color", "blue", "font-size", "100px"];let cssObj = {};for (var i = 0; i < words.length; i++){&nbsp; &nbsp; cssObj = { ...cssObj, [words[i]]: words[i+1] }}$("#mainbar").css(cssObj);