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

==> 学习汇总（持续更新）
==> 从零搭建后端基础设施系列（一）-- 背景介绍

---

效果如图:

HTML代码:

        

            

                属性名:
                属性值:
            
            

                
                
            
            

                在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果
            
        
    

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 = '';
            }
        }