經過獲取input的值來設置box的style屬性

時間 2019-11-16

標籤經過獲取 input 設置 box style 屬性简体版

原文原文鏈接

在第一個input裏輸入屬性的名字，在第二個input裏輸入單位，經過點擊按鈕，改變下面box的屬性，javascript

好比，在第一個input裏輸入width，第二個輸入，200px，點擊按鈕，box，寬就會改變css

<!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>