在页面上改变Div任意属性值

效果如图:

HTML代码:

<div id = "div">
        <form action="">
            <div id="text">
                <label>属性名:<input type="text" name="name" id="name" /></label>
                <label>属性值:<input type="text" name="value" id="value" /></label>
            </div>
            <div id="btn">
                <input type="button" name="ok" id="ok" value="确定"/>
                <input type="button" name="reset" id="reset" value="重置" />
            </div>
            <div id="test-area">
                在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果
            </div>
        </form>
    </div>

CSS代码:

*{margin:0;padding:0;}
        #div{width: 400px; margin: 0 auto;}/*居中*/
        #div #text{width: 350px;height: 100px;}
        #div #text input{width: 250px;height:30px;margin:10px;}
        #div #btn{width: 300px; height: 40px; }
        #div #btn #ok{width:70px;height:30px; margin-left:73px; }
        #div #btn #reset{width:70px;height:30px;}
        #div #test-area{width: 300px;height: 300px;margin-left: 60px;background: #000000;color: #fff; }

JS代码：

window.onload = function () {
            function $(id){return document.getElementById(id);}; //通过id获取元素对象
            function changeValue(name,value) {$("test-area").style[name] = value;};//改变样式
            $('ok').onclick = function () {
                changeValue($('name').value,$('value').value);//把编辑框中的值传进去
            }
            $('reset').onclick = function () {
                $('test-area').removeAttribute('style'); //去掉style属性即可重置
                $('name').value = '';
                $('value').value = '';
            }
        }