通过获取input的值来设置box的style属性

最新推荐文章于 2022-03-27 15:52:02 发布

dengshaji4419

最新推荐文章于 2022-03-27 15:52:02 发布

阅读量364

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/7-Eleven/p/5777518.html

版权

在第一个input里输入属性的名字，在第二个input里输入单位，通过点击按钮，改变下面box的属性，

比如，在第一个input里输入width，第二个输入，200px，点击按钮，box，宽就会改变

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box{width: 100px;height: 100px;background: red;}
    </style>
</head>
<body>
    <input type="text" name="" id="text1">
    <input type="text" name="" id="text2">
    <input type="button" name="" id="but" value='点击'>
    <div id="box"></div>
    <script type="text/javascript">
        window.onload=function(){
            var text1 = document.getElementById("text1");
            var text2 = document.getElementById("text2");
            var but = document.getElementById("but");
            var box = document.getElementById("box");
            but.onclick=function(){
                var name = text1.value;
                var val = text2.value;
                box.style[name]=val;
            }
        }
    </script>
</body>
</html>

首先还是要通过id获取到每个需要的东西

给点击按钮设置点击事件onclick事件

比如，通过点击，box宽度变为200px

but.οnclick=function(){ var name = text1.value; var val = text2.value; console.log(name,val); box.style.width="200px"; }
如果按照这样的思想，那么上面的变量应该怎添加呢？

box.style.name=val;
这样添加时不正确的。应该用

box.style[name]=val;

注意：.操作属性的时候，后面必须跟正真的属性名称，不能跟变量名称

　　　【】操作属性的时候，里面可以更属性名称和变量名，如果放属性名称的时候，需要加引号，放变量名的时候，不用加引号

转载于:https://www.cnblogs.com/7-Eleven/p/5777518.html

dengshaji4419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过获取input的值来设置box的style属性

在第一个input里输入属性的名字，在第二个input里输入单位，通过点击按钮，改变下面box的属性，比如，在第一个input里输入width，第二个输入，200px，点击按钮，box，宽就会改变<!DOCTYPE html><html><head> <meta charset="UTF-8"> ...
复制链接

扫一扫