Question

我们有一个样式节点，我们希望在HTML文档中编写它，但是我们不想对其进行处理...只是为了进一步使用，我们之所以不使用隐藏节点是因为因为我们想在Dev时保留语法突出显示。

在Javascript中，可以通过更改type属性来完成

例如：

<script type="gzip/text"></script>

将导致脚本无法执行...

是否可以在style个节点上执行相同的操作？

Answer 1

您可以使用media attribute启用/禁用样式元素。

通过将其设置为与任何设备都不匹配的值，实际上是在禁用它。

<style media="max-width: 1px">
   /* Nothing contained in this styles element will be applied */
</style>

通过动态设置和删除此属性及其值，可以模拟启用/禁用的行为，如以下示例所示：

document.getElementById('but').addEventListener('click', function toggle(){
  let styleEl = document.getElementById('styles')
  // toggle enabled/disabled
  if(styleEl.hasAttribute('media')) styleEl.removeAttribute('media')
  else styleEl.setAttribute('media', "max-width: 1px")
})

<style id="styles" media="max-width: 1px">
   div { color: red }
</style>

<div id="but">Click me</div>

Answer 2

您也可以通过将类型更改为文本来禁用它。

这是一个例子

function toggle(item){
   if (typeof item  === "string")// its an id 
     item = document.getElementById(item);
   if (item.getAttribute("type") == "text")
       item.removeAttribute("type");
   else item.setAttribute("type", "text"); // this will disable it 
}

<style id="styleOne">
.active{
color:red;
}
</style>


<p onclick="toggle('styleOne')" class="active">Toggle Style</p>

Answer 3

您可以在 JavaScript 中设置 disabled property。如果设置为 true，则不会应用元素中的 CSS 规则。

function toggleEnabled(stylesheet){
    stylesheet.disabled = !stylesheet.disabled;
}

演示：

function toggleEnabled(stylesheet){
    stylesheet.disabled = !stylesheet.disabled;
}
document.querySelector('button').addEventListener('click', function(e){
  toggleEnabled(document.getElementById('myStyles'));
});

<style id="myStyles">
body {
  background-color: dodgerblue;
}
</style>
<button>Toggle Stylesheet</button>

如何禁用HTML / JS中的STYLE元素？

3 个答案: