js 怎样获取div的宽度?

JavaScript014

js 怎样获取div的宽度?,第1张

<script type="text/javascript">

//jquery获取ID为abc的元素的宽度.

alert($("#abc").width())

//js获取ID为abc的元素的宽度.

alert(parseInt(document.getElementById('abc').style.width))

</script>

js通过html对象的style属性获取元素属性.

获取到的值是包含单位(px像素)的.

将获取到的值转化成整数就可去掉单位.

parseInt() 函数可解析一个字符串,并返回一个整数.

语法

parseInt(string, radix)

参数 描述

string 必需。要被解析的字符串。

radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

                  如果省略该参数或其值为 0,则数字将以 10 为基础来解析。

                  如果它以“0x” 或 “0X” 开头,将以 16 为基数。

                  如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。

返回值

返回解析后的数字。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>test</title>

<style>

#div {

width: 100px

height: 50px

border: 1px solid red

color: green

text-align: center

}

input {

width: 250px

}

</style>

<script>

function test() {

var a = document.getElementById('a')

var b = document.getElementById('b')

var div = document.getElementById('div')

div.style.width = a.value + 'px'

div.style.height = b.value + 'px'

}

</script>

</head>

<body>

<div>宽度(默认100px):<input type="text" id="a" placeholder="输入想要的宽度,点击测试看效果" /></div>

<div>高度(默认50px):<input type="text" id="b" placeholder="输入想要的高度,点击测试看效果" /></div>

<div><button onclick="test()">点击测试</button></div>

<div id="div">来改变我</div>

</body>

</html>

这个要绝对定位的div可以,也就是position为absolute 或fixed。

var chg_width="每次改变的宽带"

div.style.left=div.style.left-chg_width/2

div.style.width=div.style.width+chg_width

这个方法如果一次改变宽度比较多的话看起来向两边同时宽展可能效果并不平滑,要想精确的平滑效果你还要在left和width的变化上加成1px左移和变宽动画。