如何在 html 中隐藏样式元素

Question

回答：感谢@Traktor53 和@PHPglue

我的网页有一个用于输入 html 代码的文本区域和一个用于输入 css 的文本区域。 结果显示在一个 div 中。

<textarea id="c" placeholder="CSS code here..." rows="10" cols="50">
 //What the user enters here will become a new <style> tag
</textarea>

<div id="pane">
//This is where it will be displayed
</div><br>
<button type="button" onclick="handleToggle()">Toggle</button>

我正在尝试使用一个 javascript 函数来关闭特定的样式元素。 我想删除样式标签及其内容，或者使其不显示内容。

编辑：这是我的 javascript

function handleToggle(){

        var pane = document.getElementById('pane');
        var css = document.getElementById('c');

        var x = document.getElementById('cssStyle');

        x.addClass("test");

这就是创建样式的方式

function handleLaunch(){
        var div = document.getElementById('pane');
        var css = document.getElementById('c');

        var style = document.createElement('style');
        style.id = "cssStyle"
        style.type = 'text/css';
        style.innerHTML = document.getElementById('c').value;
        document.getElementsByTagName('head')[0].appendChild(style)

Answer 1

您可以添加带有 id 的样式元素，例如使用

// create STYLE element in javascript
var se =document.createElement("STYLE");
se.id = "myCSS"; // for example
se.innerText = "textarea { background-color: yellow"; // for example
document.body.appendChild(se);

然后使用标准 DOM 操作删除样式元素：

// remove existing element
document.getElementById( "myCSS").remove();

或者，您可以更新之前使用javascript 或 <script> 标签创建的 STYLE 元素的内容，例如：

// change content of existing STYLE element:
document.getElementById( "myCSS").innerText = "textarea { background-color: blue";

---

附加信息。

1. ChildNode.remove是 DOM4 建议的一部分，在 IE 中不受支持。 旧的语法是将 DOM 元素作为其父元素的子元素移除： ChildNode.parentNode.removeChild( ChildNode);

2. 尽管InnerText得到广泛支持并出现在DOM 生活标准中，但在当前使用textContent W3C DOM 标准中并不支持。

Answer 2

visibility: hidden是 CSS 不是 HTML。 HTML 属性使用=分配，而不是: 。 很多时候，这些属性与 CSS 或 JavaScript 属性相同，但这里并非如此。

function removeLastStyleTag(){
  var s = document.getElementsByTagName('style'), l = s.length;
  while(l--){
    var n = s[l];
    if(n.nodeName.match(/^style$/i)){
      n.parentNode.removeChild(n); l = 0;
    }
  }
}

Answer 3

如果您希望隐藏 HTML 元素，请尝试在 CSS 中执行以下操作

.class{
    display: none;
}

编辑：

似乎addClass和removeClass不能在任何地方工作。 使用标准 JavaScript 可以实现

 function handleToggle(){
     // get the element
     var element = document.getElementById('pane');

     // toggle
     element.classList.toggle(".class");

 }

这将隐藏和显示元素。 如果这是您要查找的内容，它不会在其中插入任何代码。

希望这可以帮助！ 如果您有问题，请告诉我