美文网首页
js改变div宽高注意点

js改变div宽高注意点

作者: 睡雨 | 来源:发表于2017-02-04 15:32 被阅读78次

1.div原本的宽度和高度需要写在style=“”里面,不要写在<style type="text/css"></style>里面,不然识别不了

2.使用document.getElementById("imgD").style.width获取的宽度是字符串类型,需要用parseInt()转换为整型

3.在设置宽度时,要加上'px',保证规范

代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function imgW() {
var w = document.getElementById("imgD");
var sw = w.style.width;
w.style.width = parseInt(sw)+20+'px';

            }
            function imgH(){
                var h = document.getElementById("imgD");
                var sh = h.style.height;
                h.style.height = parseInt(sh)+20+'px';
            }
    </script>
</head>
<body>
    <div id="imgD" style="margin: 0 auto;border: 1px solid red;width: 300px;height: 300px;">
    </div>
    <br />
    <input type="button" id="width" value="加宽" onclick="imgW()"/>
    <input type="button" id="height" value="加高" onclick="imgH()"/>
</body>

</html>

相关文章

网友评论

      本文标题:js改变div宽高注意点

      本文链接:https://www.haomeiwen.com/subject/yjojittx.html