我正在尝试创建一个网站构建器(拖放页面构建器),并且想知道当有人更改元素的样式时在哪里存储样式。例如,在 WordPress 中,您可以在定制器中输入您自己的自定义 CSS(图像示例: /image/osKEF.png )
在 Wix 或 Google Chrome Inspect Element 等其他页面构建器中,您可以单击按钮来启用或禁用样式。
在对页面进行当前/实时 CSS 编辑时,这些样式保存在哪里以及如何保存? (我说的不是数据库,因为代码还没有保存。我说的是在现场更改时,这些“临时/实时”CSS 样式保存在哪里?)
最佳答案
您可以使用 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>
关于javascript - 在哪里存储临时实时 <style> 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59349601/