<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>
RunJS 演示代码
</title>
<style>
* {
margin: 0
padding: 0
}
div {
position: absolute
float: left
height: 500px
}
div.left {
background-color: red
width: 200px
left:0px
}
div.center {
background-color: yellow
width: 200px
right:205px
float:right
}
div.handler {
width: 5px
cursor: col-resize
background-color: blue
z-index:1
left: 200px
}
</style>
<script>
jQuery(function ($){
var doc = $(document), dl = $("div.left"), dc = $("div.center")
var sum = dl.width() + dc.width() +
$("div.handler").mousedown (function (e) {
var me = $(this)
var deltaX = e.clientX
-
(parseFloat(me.css("left")) || parseFloat(me.prop("clientLeft")))
doc.mousemove(function (e){
var lt = e.clientX - deltaX
lt = lt < 0 ? 0 : lt
lt = lt > sum - me.width() ? sum - me.width() : lt
me.css ("left", lt + "px")
dl.width(lt)
dc.width(sum-lt-me.width())
})
}).width()
doc.mouseup (function(){
doc.unbind("mousemove")
})
doc[0].ondragstart
= doc[0].onselectstart
= function ()
{
return false
}
})
</script>
</head>
<body>
<div class="left">
同时在线人数：1000
点击刷新
</div>
<div class="handler">
</div>
<div class="center">
sss
</div>
</body>
</html>
一、途径：
第一种情况就是宽高都写在样式表里，就比如#div1{width:120px}。这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。
第二种情况就是宽和高是写在行内中，比如style="width:120px"，这中情况通过上述2个方法都能拿到宽度。
二、小结：
因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。
三、代码：
var o = document.getElementById("view")
var h = o.offsetHeight//高度
var w = o.offsetWidth//宽度
参考资料
js获取Html元素的实际宽度高度的方法.脚本之家[引用时间2017-12-29]
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）