So, I want a text area that works as a css input area. When css is typed into the area, my plan is for it to change the html inside of an output div. How would I make the input's value (text inside of the input) act as css code? I would prefer if it was in javascript.
My code so far...
var html = document.getElementById("inputHTML").value;
var css = document.getElementById("inputCSS").value;
document.getElementById("output").innerHTML = html;
document.getElementById("output").style = css;
var html = document.getElementById("inputHTML").value;
var css = document.getElementById("inputCSS").value;
document.getElementById("output").innerHTML = html;
document.getElementById("output").style.cssText = css;
should do the trick
also JSCSSP is maybe an alternative: http://glazman.org/JSCSSP/
It parses and reserializes your CSS code
Or you can write up something yourself like this:
HTML:
<label for="area">only css here:</label>
<textarea id="area"></textarea>
<hr/>
<div id="apply-css">
<form id="bum">
<label for="bumtext">SomeText</label>
<input id="bumtext" type="text" />
<button id="bumbtn">SomeButton</button>
</form>
</div>
JAVASCRIPT:
var cssArea = document.getElementById("area");
var applyCssAreaDiv = document.getElementById("apply-css");
// reload as soon as focus is lost
function onFocusLost() {
var cssText = cssArea.value;
console.log(cssText);
// TODO: validate css before applying Left as an Exercise!:-)
var allStylesOnPage = document.getElementsByTagName("style"),
oldMyDynamicStyle = document.getElementById("myDynamicStyle");
if (oldMyDynamicStyle) { // delete any existing style with #myDynamicStyle
document.getElementsByTagName("head")[0].removeChild(oldMyDynamicStyle);
}
// create our css from text area text
var newStyle = document.createElement("style");
newStyle.setAttribute("id", "myDynamicStyle");
newStyle.innerHTML = cssText;
//stick it back into the DOM as last "style" element
document.getElementsByTagName('head')[0].appendChild(newStyle);
}
// as soon as you tab out of css area your styles will applied!!
cssArea.addEventListener("blur", onFocusLost);
Some CSS just so that you could see how it is overridden:
form#bum {
padding: 60 60;
}
form >label {
font: bold Arial #CCC;
}
button {
height: 60px;
width: auto;
}
Here is the fiddle to see it all working together
