DOM元素的大小和位置
HTML:
<div id="parent">
<div id="box">
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测 试测试测试
</div>
</div>
CSS:
#parent{
position:absolute;
width: 400px;
height: 400px;
background-color: blue;
margin: 10px;
}
#box{
width: 200px;
height: 200px;
overflow: scroll;/**/
background-color: pink;
/*margin: 10px;*/
position: absolute; /*此时的offsetTop,offsetLeft,获取的值是相对于父元素的*/
top: 50px;
left: 50px;
border:10px solid red;
padding: 10px;
margin: 10px;/**/
}
var box = document.getElementById("box");
1.scollTop,scollLeft获取/设置滚动条被隐藏的内容的高度/宽度
box.scrollTop = 100;
// alert(box.scrollTop);
// alert(box.scrollHeight);
将滚动条设置为0:
scorllStar(box);
function scorllStar (elemnet) {
if (box.scrollTop!=0) {
box.scrollTop = 0;
};
}
2.offsetLeft 和 offsetTop 获取当前元素相对于父元素的位置
alert(box.offsetTop);
alert(box.offsetLeft);
alert(box.offsetParent); // 如果没有给父元素设置position非ie浏览器会返回body对象,ie会返回object,所以要想得到具体的元素需要给 父元素设置position的值。
求子元素距离body的值:
alert(box.offsetTop + box.offsetParent.offsetTop); // 60 子元素+父元素
如果要求多个嵌套层中的任意一个元素距离父html/body的值时,可以这样:
alert(newOffsetTop(box));
function newOffsetTop (elemnet) {
var top = elemnet.offsetTop;
var parent = elemnet.offsetParent;
while(parent!=null){
top += parent.offsetTop;
parent = parent.offsetParent;
}
return top;
}
function newOffsetLeft (elemnet) {
var left = elemnet.offsetLeft
var parent = elemnet.offsetParent;
while(parent!=null){
left += parent.offsetLeft;
parent = parent.offsetParent;
}
return left;
}
3.scrollWidth, scollHeight 获取滚动内容的元素大小
alert(box.scrollWidth); //包含padding值,但不包含margin值,如果有滚动条,会减去滚动条的宽高值
alert(box.scrollHeight); //ie7显示的高度是内容高度不是元素的本身的高度
4.clientWidth,clientHeight获取元素可视区域的大小 包含padding值,减去边框,不包含margin值
alert(box.clientWidth);
alert(box.clientHeight);
5.clientLeft,clientTop 返回元素的左边框,上边框
alert(box.clientLeft);
alert(box.clientTop);
http://blog.csdn.net/xuantian868/article/details/3116442
http://blog.sina.com.cn/s/blog_48e6792c0100z7ge.html
7GT.png)
DOM元素的大小和位置的更多相关文章
- C1:DOM 元素的尺寸和位置
DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括内容区宽/高,padding,border,不包括margin.如果元素的box-sizei ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...
- 第一百一十七节,JavaScript,DOM元素尺寸和位置
学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一.获取元素CSS大小 1. ...
- DOM元素尺寸和位置
一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; / ...
- JavaScript(第二十一天)【DOM元素尺寸和位置】
学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一.获取元素CSS大小 ...
- DOM元素的位置、尺寸及更多的信息
一.基本概念 document.documentElement是整个DOM树的根节点,对应的元素就是html.下面将其称作根元素或根节点. document.body,对应的元素是body 二.浏览器 ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
随机推荐
- Python之路【第十八篇】Django小项目webQQ实现
WEBQQ的实现的几种方式 1.HTTP协议特点 首先这里要知道HTTP协议的特点:短链接.无状态! 在不考虑本地缓存的情况举例来说:咱们在连接博客园的时候,当tcp连接后,我会把我自己的http头发 ...
- 关于学习JavaScript 的 高三编程 一些心得(三)
最近在学习高三的 过程中,遇到的了一些 难以理解的问题, 在看到第五章之前都是 OK 的.但是到了 引用类型的时候就有点蒙了. 首先我们看下,引用类型的 解释:[引用类型的值(对象)是引用类型的一个 ...
- gzip的使用
经常会有文件过大,给文件的传输和增添了很多的麻烦,早先得知apach有个base64貌似可以用来压缩文件,但是测试没有什么效果,反而增大了文件的大小.今天了解了java自带的gzip包,如获至宝,超级 ...
- PHP正则表达式详解(二)
前言: 在本文中讲述了正则表达式中的组与向后引用,先前向后查看,条件测试,单词边界,选择符等表达式及例子,并分析了正则引擎在执行匹配时的内部机理. 本文是Jan Goyvaerts为RegexBudd ...
- C++成员初始化顺序
#include <iostream> using namespace std; int seti() {cout << "seti" << e ...
- input placeholder兼容ie10以下
代码如下: ,) < ) { $('input[placeholder]').each(function(){ var input = $(this); $(input).val(input.a ...
- Apache Rewrite匹配问号的问题
在写RewriteRule准备匹配url中的问号及后面的参数时,怎么弄都无法成功.正则的写法经过测试是正确的,问号也已经转义\?,可还是不行. 百度查询了下,RewriteRule 不会去匹配问号?后 ...
- php之获取程序源码的方法
文件hello.php和index.php在同一目录 hello.php <?php class hello{ public function __construct() { echo 'hel ...
- twemproxy explore,redis和memcache代理服务器
twemproxy,也叫nutcraker.是一个twtter开源的一个redis和memcache代理服务器. redis作为一个高效的缓存服务器,非常具有应用价值.但是当使用比较多的时候,就希望可 ...
- python在windows下获取cpu、硬盘、bios、主板序列号
测试 此处使用的是wmi库,可以去google里面搜索“python wmi” import os, sysimport timeimport wmi,zlib def get_cpu_info() ...