JS样式动态设置-优快云博客

本文链接：https://blog.youkuaiyun.com/IT_zkc/article/details/53192981

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>#box{width: 100px;height: 100px;background: red;}</style>
    <script>
        /*
        * 需求：
        * 点击按钮获取输入框里的属性名称与属性值，对div进行设置
        * 分析：
        *   1，获取输入框、按钮、box
        *   2，给按钮添加点击事件
        *   3，获取到输入框里内容
        *   4，改变div的样式
        */
        window.onload=function () {
            var Otet1=document.getElementById('tet1');
            var Otet2=document.getElementById('tet2');
            var Obtn=document.getElementById('btn');
            var Obox=document.getElementById('box');
            Obtn.onclick=function () {
                var name=Otet1.value;
                var num=Otet2.value;
                //console.log(name,num);
                /*
                * 点操作的时候，后面只能跟真正的属性名称，不能跟变量名
                * []操作的时候，里面可以放属性名称与变量名，如果放的属性名，要加引号如果放的变量名不需要加引号
                */
                Obox.style[name]=num;
            }
        }
    </script>
</head>
<body>
<input type="text"id="tet1"/>
<input type="text"id="tet2"/>
<input type="button"id="btn"value="按钮"/>
<div id="box"></div>
</body>
</html>

js属性操作实例