Question

所以，我想要一个作为css输入区域的文本区域。当css输入到该区域时，我的计划是更改输出div中的html。如何使输入的值（输入内的文本）充当css代码？我更喜欢它是在javascript中。

我的代码到目前为止......

var html = document.getElementById("inputHTML").value; 
var css = document.getElementById("inputCSS").value; 
document.getElementById("output").innerHTML = html; 
document.getElementById("output").style = css;

Answer 1

var html = document.getElementById("inputHTML").value;
var css = document.getElementById("inputCSS").value;
document.getElementById("output").innerHTML = html;
document.getElementById("output").style.cssText  = css;

应该做的伎俩

JSCSSP也许是另一种选择：http://glazman.org/JSCSSP/

它解析并重新整理您的CSS代码

Answer 2

或者你可以自己写一些东西：

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

一些CSS只是为了让你可以看到它是如何被覆盖的：

form#bum {
    padding: 60 60;
}
form >label {
    font: bold Arial #CCC;
}
button {
    height: 60px;
    width: auto;
}

以下fiddle可以看到它们一起工作

文本输入值为css

2 个答案: