javascript - 通过模板和占位符动态生成 css

Question

我想生成 css在运行时动态地。

最初我用过sass并定义了一些变量并使用了这些变量。但是必须首先从 scss 生成 css . Sass 给了我使用变量和函数的灵 active ，但我仍然无法在运行时通过 javascript 更改它们。 .

一种方法是通过 javascript 更改内联样式但这种方法并不完全灵活。

 document.getElementById("myDiv").style.color = "red"; 

上面我不想做，我也不想附加任何<style>通过 javascript 属性。

我想使用 javascript 但不想更改每个样式属性。我想使用 css 和 javascript 实现类似 scss 的效果，但在运行时即动态。

例如假设我得到了 color来自ajax 调用 的信息现在我想根据那个更改整个网站的主题color立即收到，无需重新启动或重新部署我的应用程序。

例如

在 scss 中完成

.myClass {
           background:$color;
           // Update color value dynamically at run-time
}

这有可能吗，还是我想错了方向!

Answer 1

玩完这个和 CSS 变量。我要添加第二个答案，因为它与我的第一个答案有很大不同，而且它更符合您的原始问题(使用 JS 更新 CSS 变量)。

但是...不要这样做。 :) IE < Edge 中的浏览器支持不存在，它几乎肯定比更新页面慢 <style>元素虽然我还没有测试过。这jsperf测试各种样式更新方法。它不包括 innerHTML在单个 style元素(可能是最快的)，但您可以看到以下 CSS DOM 方法比其他方法慢。

// get the stylesheet
// array position depends on how many style sheets you're loading.     
// adjust as needed.
var sheet = document.styleSheets[0];


// simplest method: insertRule()
// setTimeout only for demo so you can see the change
window.setTimeout(function(){
  // @media all {} is a trick to insert more than one 
  // selector and/or properties at once. Otherwise it's:
  // sheet.insertRule(":root", "--header-color: green"); ...repeat...
  sheet.insertRule("@media all { :root { --header-color: green; --main-color: orange;  } }", 1);
}, 1200);



// SAFER method via addCSSRule. 
// button and getAjaxStyles are just placeholders, obviously
var btn = document.querySelector('button');
btn.addEventListener("click", getAjaxStyles);

function getAjaxStyles() {
  // success callback... break apart the json and update the CSS variables
  addCSSRule(sheet, ":root", "--header-color: orange");
  addCSSRule(sheet, ":root", "--main-color: blue");
  addCSSRule(sheet, ":root", "--alt-color: red");
  addCSSRule(sheet, ":root", "--borderColorA: lavender");
  
  // or go with a single big string. definitely faster:
  // addCSSRule(sheet, ":root", "--alt-color: red; --borderColorA: #0ff; ")
}

// Credit for addCSSRule() goes to Diego Flórez in a comment on 
// https://davidwalsh.name/add-rules-stylesheets
var addCSSRule = function(sheet, selector, rules) {
  //Backward searching of the selector matching cssRules
  var index = sheet.cssRules.length - 1;
  for (var i = index; i > 0; i--) {
    var current_style = sheet.cssRules[i];
    if (current_style.selectorText === selector) {
      //Append the new rules to the current content of the cssRule;
      rules = current_style.style.cssText + rules;
      sheet.deleteRule(i);
      index = i;
    }
  }
  if (sheet.insertRule) {
    sheet.insertRule(selector + "{" + rules + "}", index);
  } else {
    sheet.addRule(selector, rules, index);
  }
  return sheet.cssRules[index].cssText;
}

/* Set initial CSS variables */
:root {
  --header-color: #333;
  --main-color: #888;
  --alt-color: #bbb;
  --borderColorA: #ccc;
}
h1 {
  color: var(--header-color);
}
p {
  border-bottom: 1px solid var(--borderColorA);
  color: var(--main-color);
}
p+p {
  color: var(--alt-color);
}

<h1>header</h1>
<p>paragraph 1</p>
<p>paragraph 2</p>
<button>Update CSS Variables</button>