JavaScript--利用变量来修改属性的小练习

来源：互联网发布：自由行软件编辑：程序博客网时间：2024/05/22 08:06

1.想使用left等属性必须有下列语句，即使其相对定位

position: relative;

2.button的onclik事件

 oBtn1.onclick = function(){        oDiv.style.width = "400px";    }

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        div{            width:100px;            height:100px;            position: relative;            background: red;            left: 0;            top: 0;            margin-top: 30px;            transition:1s;        }    </style></head><body>    <input type="button" value="按钮1" id="btn1">    <input type="button" value="按钮2" id="btn2">    <input type="button" value="按钮3" id="btn3">    <input type="button" value="按钮4" id="btn4">    <div id="box"></div></body></html><script type="text/javascript">    var oDiv = document.getElementById("box");    var oBtn1 = document.getElementById("btn1");    var oBtn2 = document.getElementById("btn2");    var oBtn3 = document.getElementById("btn3");    var oBtn4 = document.getElementById("btn4");    oBtn1.onclick = function(){        oDiv.style.width = "400px";    }    oBtn2.onclick = function(){        oDiv.style.height = "400px";    }    oBtn3.onclick = function(){        oDiv.style.background = "yellow";    }    oBtn4.onclick = function(){        oDiv.style.left = "400px";    }</script>

效果

这里写图片描述

阅读全文

0 0