如何在 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");

 }

這將隱藏和顯示元素。 如果這是您要查找的內容，它不會在其中插入任何代碼。

希望這可以幫助！ 如果您有問題，請告訴我