javascript 元素的位置，大小单位

最新推荐文章于 2023-08-06 08:00:00 发布

永远爱好写程序

最新推荐文章于 2023-08-06 08:00:00 发布

阅读量700

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/limlimlim/article/details/8439460

Javascript 专栏收录该内容

56 篇文章

订阅专栏

1.通过dom读取元素的top，left，width，height等取到的值不是数字，而是“10px”这样的
   字符串；为这些属性设值的时候IE可以是80,90这样的数字，FireFox必须是"80px","90%"等
   这样的字符串形式，为了兼容统一用字符串形式
2.如果要修改元素的大小(宽度加10),则首先要取出元素的宽度，然后用parseInt将宽度转换
   为数字(parseInt可以将"20px"这样的数字开头的包含其他内容的字符串解析为20,
   parseInt('22px',10),也就是解析尽可能多的部分);然后加上一个值，再加上px赋值回去

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function GetWidth() {
            var div = document.getElementById("divMain");
            alert(div.style.width);
        }
        function SetWidth() {
            var div = document.getElementById("divMain");
            div.style.width = "200px";
        }
        function AddWidth() {
            var div = document.getElementById("divMain");
            var oldWidth = div.style.width;
            oldWidth = parseInt(oldWidth, 10);      //第二个参数10，代表转换为10进制
            oldWidth = oldWidth + 10;
            oldWidth = oldWidth + "px";
            div.style.width = oldWidth;
        }
    </script>
</head>
<body>
    <input type="button" value="取值" onclick="GetWidth()" />
    <input type="button" value="设值" onclick="SetWidth()" />
    <div id="divMain" style="width:100px;height:100px;background-color:Red">

    </div>
    <input type="button" value="宽度自增" onclick="AddWidth()" />
    <input type="button" value="解析字符串为数字"
            onclick="alert(parseInt('50asdfasdf',10))" />
</body>
</html>