Question

回答：想知道@ Traktor53和@PHPglue

我的网页有一个textarea用于输入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或＆lt; script＆gt;创建的STYLE元素的内容。标签，例如：

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

<小时/> 附加信息。

ChildNode.remove是DOM4建议的一部分，在IE中不受支持。较旧的语法是将DOM元素作为其父元素的子元素删除：ChildNode.parentNode.removeChild( ChildNode);
虽然InnerText受到广泛支持且出现在DOM living standard中，但目前使用textContent的W3C DOM标准不支持(lldb) frame variable -O trip.id。

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"); }

这将隐藏并显示元素。它不会在里面插入任何代码，如果这是您正在寻找的内容。

希望这有帮助！如果您有任何疑问，请告诉我

如何在html中隐藏样式元素

3 个答案: