javascript 位置,尺寸,溢出
来源:互联网 发布:如何自学软件编程 编辑:程序博客网 时间:2024/05/16 15:55
一、offsetWidth:元素的宽度,包括边框,内容,内边距。
二、offsetHeight:元素的高度,包括边框,内容,内边距。
三、offsetLeft:元素的X坐标(相对于最近已定位的祖先元素,如果没有则是窗口)。
四、offsetTop:元素的Y坐标(相对于最近已定位的祖先元素,如果没有则是窗口)。
五、clientWidth:元素的宽度,不包括边框,只包括内容和内边距。
六、clientHeight:元素的高度,不包含边框,只包括内容和内边距。
七、clientLeft:元素内边距的外边缘与外边框的水平距离(也就是左边框的宽度),如果有滚动条时,会包含滚动条的宽度。
八、clientTop:元素的内边距的外边缘与外边框的垂直距离(也就是上边距的宽度),如果有滚动条时,会包含滚动条的宽度。
示例:HTML代码:
<div id="div1" style="width:500px;height:300px;margin-left:100px;margin-top:100px; background-color:#ffeedd; border:5px solid red;padding:3px;"> <p id="p1">我是第一个P</p> <p id="p2">我是第二个P</p> <p id="p3">我是第三个P</p> <p id="p4">我是第四个P</p> </div>
javascript代码:
window.onload = function () { var div1 = document.getElementById("div1"); document.getElementById("p1").textContent = "div1的offsetWidth是:" + div1.offsetWidth; document.getElementById("p2").textContent = "div1的offsetHeight是:" + div1.offsetHeight; document.getElementById("p1").textContent += "; div1的offsetWidth是:" + div1.clientWidth; document.getElementById("p2").textContent += "; div1的offsetHeight是:" + div1.clientHeight; document.getElementById("p3").textContent = "div1的offsetLeft是:" + div1.offsetLeft; document.getElementById("p4").textContent = "div1的offsetTop是:" + div1.offsetTop; document.getElementById("p3").textContent += "; div1的clientLeft是:" + div1.clientLeft; document.getElementById("p4").textContent += " ; div1的clientTop是:" + div1.clientTop; }
实际效果如图所示:
九、scrollWidth 元素的内容区域加上内边距再加上水平溢出内容的尺寸。如果没有溢出则与clientWidth一样。也就是说scrollWidth-clientWidth就是溢出的尺寸。
十、scrollHeight 元素的内容区域加上内边距再加上垂直溢出内容的尺寸。如果没有溢出泽宇clientHeight一样。
十一、scrollLeft 当元素有滚动条时,此属性可以读取和设置滚动条的水平位置。
十二、scrollTop 当元素有滚动条时,此属性可以读取和设置滚动条的垂直位置。
HTML代码:
<div id="div1" style="width:500px;height:300px;margin-left:100px;margin-top:100px; background-color:#ffeedd; border:5px solid red;padding:3px; overflow:scroll;"> <div id="div2" style="width:700px;height:500px;background-color:#ddbbdd;"> </div> <input type="button" value="查看scroll" onclick="fun1()" /> </div>
javascript代码:
function fun1() { var div1 = document.getElementById("div1") alert("scrollWidth:" + div1.scrollWidth + ";scrollTop:" + div1.scrollTop + ";scrollLeft" + div1.scrollWidth + ";scrollTop" + div1.scrollTop);}
效果如图:
十三、offsetParent 返回最近已定位的父元素。
HTML代码:
<div id="div1" class="div1Class" style="position:relative;"> <div id="div2"> </div> </div>
javascript代码:
window.onload = function () { var div2 = document.getElementById("div2") alert(div2.offsetParent.className); }
执行结果:弹出 div1Class 也就是说,div2最近已定位的父元素的class="div1Class"
- javascript 位置,尺寸,溢出
- JavaScript DOM元素尺寸和位置
- JavaScript获取DOM元素位置和尺寸
- javascript基础:DOM5元素尺寸和位置
- javascript获得元素的尺寸和位置一
- JavaScript获取DOM元素位置和尺寸大小
- JavaScript获取DOM元素位置和尺寸大小
- JavaScript获取DOM元素位置和尺寸大小
- JavaScript获取DOM元素位置和尺寸大小
- JavaScript获取DOM元素位置和尺寸大小
- javaScript笔记(十八) DOM元素尺寸和位置
- JavaScript获取DOM元素位置和尺寸大小
- javascript笔记--(第二十二章)DOM元素尺寸和位置
- 浅谈JavaScript元素的尺寸和位置相关属性
- JavaScript获取DOM元素位置和尺寸大小
- JavaScript权威指南_137_第15章_脚本化文档_15.8-文档和元素的几何形状和滚动-关于元素尺寸、位置、溢出的更多信息
- 窗口位置及尺寸
- 窗口位置及尺寸
- Python三大神器之pip的安装
- 【git系列之E】git的分支操作(查看分支、切换分支、新建分支和删除分支)
- [RK3288][Android6.0] ALSA的DMA buffer读写位置更新
- codevs 3342 绿色通道(二分+dp+优先队列or单调队列)好题
- hadoop streaming (shell执行 & combiner & 数据分割)
- javascript 位置,尺寸,溢出
- 使用Apache POI生成和解析Excel文件
- Nginx 配置部分详述
- 【OpenCV】邻域滤波:方框、高斯、中值、双边滤波
- 在servlet中使用jasperreport展示报表
- 【R语言可视化】R语言画爱心图
- 安卓商品展示
- “集体智慧编程”之第六章:文档过滤的基础和朴素贝叶斯分类器
- awk命令