属性操作实例

来源：互联网发布：知行高职英语综合教程1 编辑：程序博客网时间：2024/05/18 00:02
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            #box{                width: 100px;                height: 100px;                background: #FF0000;                margin: 10px;            }        </style>        <script>        /*         * 需求：         * 点击按钮获取输入的的属性名称和属性值对div进行设置；         *          * 分析：         * 1，获取输入框、按钮、box；         * 2，给按钮添加点击事件         * 3，获取到输入框的内容         * 4，改变box的内容         */            window.onload=function(){                var text1=document.getElementById('text1');                var text2=document.getElementById('text2');                var btn=document.getElementById('btn');                var box=document.getElementById('box');                btn.onclick=function(){                    var name1=text1.value;                    var name2=text2.value;                    console.log(name1,name2);                    /*                     * 笔记：                     * 1，点操作属性时，后面只能跟真正的属性名称，不能跟变量名；                     * 2，[]操作属性时，后面可以放属性名或者变量名，如果放的属性名那要加引号，                     *    如果放变量名则不需加引号；                     */                    box.style.background='yellow';                    box.style['margin'] = '100px';  //margin加引号                    box.style[name1]=name2;         //name1不加引号                }            }        </script>    </head>    <body>        <input type="text" id="text1" value="" />        <input type="text" id="text2" value="" />        <input type="button"  id="btn"   value="按钮" />        <div id="box"></div>    </body></html>
0 0