【前端 ---client、offset、scroll系列】的更多相关文章

client , offset , scroll 系列 及百度导航栏案例

1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; position: absolute; border: 10px solid red; /*m…

client,offset,scroll系列

client(客户端),offset(偏移),scroll(滚动)1.client系列 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部的距离,说白了,就是边框的宽度 clientWidth 内容区域+左右padding 可视宽度 clientHeight 内容区域+ 上下padding 可视高度 例: <head> <meta charset="UTF-8"> <title>Title…

DOM盒模型和位置 client offset scroll 和滚动的关系

DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height client clientWidth 不要border clientHeight 不要border offset offsetTop offsetLeft offsetWidth  要border offsetHeight  要border scroll scrollTop scrollHeight scr…

client offset scroll 之间的区别

一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 边框的宽度 clientTop 上 边框的宽度 二.offset 属性 值 offsetWidth 元素被设置的宽度 + padding左右内间距 + 左右边框的值 offsetHeight 元素被设置的高度 + padding上下内间距 + 上下边框的值 offsetLeft 元素外边距离父级左内…

JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏

原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该是获取window对象的属性. client:使用区.客户区.指的是客户区,当然是指浏览器区域. offset:偏移.指的是目标甲相对目标乙的距离. scroll:卷轴.卷动.指的是包含滚动条的的属性. inner:内部…

JS中client/offset/scroll等的宽高解析

原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerHeight获取整个浏览器窗口的高度(单位:像素),包括侧边栏(如果存在).窗口镶边(window chrome)和窗口调正边框.包含调试窗及浏览器边框 window.outerWidth表示整个浏览器窗口的宽度,包括侧边栏(如果存在).窗口镶边(window chrome)和调正窗口大小的边框.包含…

JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)true 最好写前边: window.screen.width/height : 检测屏幕分辨率: 屏幕宽高: window.screen.width.     window.screen.height : 可视区域宽高兼容性写法: function client(){ if (window.inner…

JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度

Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth: 获取浏览器窗口外部的宽度.表示整个浏览器窗口的宽度,包括侧边栏(如果存在).窗口镶边(window chrome)和调正窗口大小的边框 window.outerHeight:获取整个浏览器窗口的高度(单位:像素),包括侧边栏(如果存在).窗口镶边(window chrome)和窗口调正边框(wi…

前端 ---client、offset、scroll系列

client.offset.scroll系列   1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; position: absolute; bor…

差别client、offset、scroll系列以及event的几个距离属性

element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + padding+border+垂直滚动栏宽度 这里的滚动栏就是单纯滚动栏的意思,不包含不可见的部分哦. 而element.offsetHeight与之相似,仅仅是改为垂直方向而已. 在页面布局中要计算和考虑的盒子的宽度和高度通经常使用这个属性. 2.offsetParent element.offs…