javascript - 在哪里存储临时实时 <style> 样式

Question

我正在尝试创建一个网站构建器(拖放页面构建器)，并且想知道当有人更改元素的样式时在哪里存储样式。例如，在 WordPress 中，您可以在定制器中输入您自己的自定义 CSS(图像示例: /image/osKEF.png )

在 Wix 或 Google Chrome Inspect Element 等其他页面构建器中，您可以单击按钮来启用或禁用样式。

在对页面进行当前/实时 CSS 编辑时，这些样式保存在哪里以及如何保存？ (我说的不是数据库，因为代码还没有保存。我说的是在现场更改时，这些“临时/实时”CSS 样式保存在哪里？)

Answer 1

您可以使用 CSSStyleSheet API 在内存中生成样式表，然后使用插入和删除方法随意在样式表中添加或删除规则。当用户完成修改后，您可以将生成的样式表传递回服务器端以保存权限。

引用文档可以在这里找到: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet#Methods

兼容性为 IE9+ 和所有其他现代浏览器，因此具有良好的覆盖范围。

下面是快速而肮脏的示例。

var style = (function() {
    // Create the <style> tag
    var style = document.createElement("style");
    // Add the <style> element to the page
    document.head.appendChild(style);
    return style;
})();

function AddRule(){
 //append rule from textbox to ss here
  style.sheet.insertRule(document.getElementById("cssIn").value, 0);
  document.getElementById("appliedRules").innerHTML = '';
  var rules = style.sheet.cssRules;
  for (var r in rules) {
    if(rules[r].cssText){
     document.getElementById("appliedRules").innerHTML += '<br>' +  rules[r].cssText;
    }
  }
}
//enable this to see your special prize in the console
//console.log(style.sheet);

<div class="test"> here we go</div>
Add Rule: <input type="text" id="cssIn" value=".test {color:blue}">
<button type="button" onClick="AddRule();">Add</button>

<div id="appliedRules"></div>