如何隐藏样式属性？

Question

Is it possible to hide style attribute in html so it still works? 是否可以在html中隐藏样式属性，使其仍然有效？ I mean this: 我的意思是：

<html style="--color:#1E90FF;">

When I remove an attribut via removeAttr , it does not work at all. 当我通过removeAttr删除属性时，它根本不起作用。 I can not do this via CSS this way: 我不能以这种方式通过CSS执行此操作：

:root {
   --color: dodgerblue;
}

since the value is inserted through localStorage based on value. 因为该值是根据值通过localStorage插入的。 Is there any way to paste it into :root with jquery without creating this style attribute? 有什么方法可以使用jquery将其粘贴到：root中 ，而无需创建此style属性？ Any ideas? 有任何想法吗？

JSFiddle JSFiddle

Answer 1

If you have a "style" tag into your page, you can insert a CSS rule in it with "insertRule": 如果页面中有“样式”标签，则可以使用“ insertRule”在其中插入CSS规则：

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleSheet/insertRule

document.getElementsByTagName('style')[0].sheet.insertRule(":root { --color: dodgerblue; }");

You can also create a tag in which you insert the rule: 您还可以创建一个标签，在其中插入规则：

 document.getElementById('trigger').addEventListener('click', function() { if (!document.getElementById('myCustomStyle')) { var styleTag = document.createElement('style'); styleTag.id = 'myCustomStyle'; document.head.appendChild(styleTag); styleTag.sheet.insertRule(":root { --color: dodgerblue; }"); styleTag.sheet.insertRule("p { color: var(--color); }"); } });

 <p>Click the button to insert CSS rules.</p> <button id="trigger">INSERT</button>

Hope this helps! 希望这可以帮助！

如何隐藏样式属性？

问题描述

1 个解决方案

解决方案1
2 2018-10-21 22:59:04

如何隐藏样式属性？

问题描述

1 个解决方案

解决方案1 2 2018-10-21 22:59:04

解决方案1
2 2018-10-21 22:59:04