从字符串数组应用多个 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){

  $("#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 formatted

const cssObj = {};

words.forEach((el,idx,arr) => {

   if(!(idx % 2) && (idx + 2 <= arr.length) ){

     cssObj[el] = arr[idx + 1] 

   }

});

$("#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++){

    cssObj = { ...cssObj, [words[i]]: words[i+1] }

}

$("#mainbar").css(cssObj);