js/style/在文本域中输入css，span中显示css的应用。


function editTitle()
{
    document.getElementById("title").innerHTML = document.getElementById("txt").value;
}function editStyle()
{
    var css = document.getElementById("style").value;
    if(css != "")
    {
        var a = css.split(";");
        var i;
        var t;
        var l;
        var s;
        for(i in a)
        {
            t = a[i];
            if(t != "")
            {
                s = t.split(":");
                if(s.length == 2)
                {
                    alert(s[0]+"\r"+s[1]);
                    //document.getElementById("title").style.eval(s[0]) = s[1];
                }
            }
        }
    }
}修改标题：<input id="txt" type="text" onkeyup="editTitle()" /><br>
显示样式：<span id="title"></span><br>
样式设置：<input id="style" type="text" onkeyup="editStyle()" style="width:500px; height:120px;" />
当“样式设置style”中输入有效的css时，如color:red;，“显示样式title”的span的css改变？如何做到？

解决方案 »

  1.   


    <html>
    <head>
    </head>
    <body>
    修改标题：<input id="txt" type="text" onkeyup="editTitle()" /><br>
    显示样式：<span id="title"></span><br>
    样式设置：<input id="style" type="text" onkeyup="editStyle()" style="width:500px; height:120px;" />
    </body>
    <script>
    function editTitle()
    {
        document.getElementById("title").innerHTML = document.getElementById("txt").value;
    }function editStyle()
    {
        var css = document.getElementById("style").value;
        document.getElementById("title").style.cssText=css;
        if(css != "")
        {
            var a = css.split(";");
            var i;
            var t;
            var l;
            var s;
            for(i in a)
            {
                t = a[i];
                if(t != "")
                {
                    s = t.split(":");
                    if(s.length == 2)
                    {
                        //alert(s[0]+"\r"+s[1]);
                        //document.getElementById("title").style.eval(s[0]) = s[1];
                    }
                }
            }
        }
    }
    </script>
    </html>