Sidward Sidward - 1 year ago 60
CSS Question

How can I hide a style element in html

ANSWERED: Thaks to @Traktor53 and @PHPglue

My webpage has a textarea for entering html code and one for entering css. The result is displayed in a div.

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

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

I'm trying to use a javascript function that will toggle a specific style element on an off. I want to either delete the style tag and its contents or make it so the contents aren't being displayed.

EDIT: Here is my javascript

function handleToggle(){

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

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


This is how the style is created

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

var style = document.createElement('style'); = "cssStyle"
style.type = 'text/css';
style.innerHTML = document.getElementById('c').value;

Answer Source

You could add a style element with an id, for example using

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

And later remove the style element using standard DOM manipulation:

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

Alternatively you could update the content of a STYLE element previously created using either javascript or <script> tags, as for example:

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

Additional Information.

  1. ChildNode.remove is part of the DOM4 recommendation and not supported in IE. The older syntax is to remove a DOM element as a child of its parent: ChildNode.parentNode.removeChild( ChildNode);

  2. Although InnerText is widely supported and appears in the DOM living standard, it is not supported in current W3C DOM standards which use textContent instead.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download