clientTop、clientWidth、offsetTop、offsetWidth、scrollTop

时间:2023-03-09 06:52:07
clientTop、clientWidth、offsetTop、offsetWidth、scrollTop
<div id="drag" class="drag">drag me</div>

clientTop、clientWidth、offsetTop、offsetWidth、scrollTop

<script type="text/javascript">
window.onload = function(e) {
e = e || window.event;
var drag = O('drag');
console.log(drag.offsetWidth);
} function O(id) {
return document.getElementById(id);
}
</script> drag.style.width = drag实际宽度                = 500                    对应jQuery的width()   drag.clientLeft = border                   = 10 drag.clientWidth = padding + drag实际宽度          = 20 + 500 + 20 = 540 对应jQuery的innerWidth() drag.offsetLeft = 1、元素绝对定位后:元素border最左边到父元素最左边的距离(包括自身margin和父元素padding、border、margin)
            2、未绝对定位,就 = parent margin + parent padding + self margin (注意不包括parent border)
drag.offsetWidth = border + padding + drag实际宽度     = 10 + 20 + 500 + 20 + 10 = 560     对应jQuery的outerWidth()

--------------------------------------------------------------------------------

drag.scrollTop   = 被卷上去的高度

视口高度、宽度(可视区域)  =  window.innerHeight、window.innerWidth
浏览器高度、宽度       =  window.outerHeight、window.outerWidth 网页被卷上去的高度 =  window.pageYOffset = window.scrollY
          =  document.body.scrollTop(chrome) + document.documentElement.scrollTop(火狐)
          =  $(document).scrollTop()(jQuery) 网页高度 = document.documentElement.scrollHeight = document.body.scrollHeight = $(document).height() event.clientX 定义:鼠标事件源距离浏览器左边框距离
event.clientY 定义:鼠标事件源距离浏览器上边框距离