js 元素高度宽度整理
1.1只读属性
height: 100px;
</style>
由于拖动了滚动条,scrollTop的属性值一直在增大,而水平方向没有滚动条,所以scrollLeft一直为0.
该属性还可以通过赋值内容自动滚动到某个位置,js如下:
<script>
var oDiv=document.querySelector('.one');
oDiv.scrollTop=20;
oDiv.onscroll=function(){
console.log(this.scrollTop+":"+this.scrollLeft);
}
</script>
通过直接设定div的scrollTop,让它直接显示在滚动条在20垂直方向上20的位置。
2)obj.style.*属性
对于一个dom元素,它的style属性返回的是一个对象,这个对象中的任意一个属性是可读写的。如obj.style.top,obj.style.wdith等,在读的时候,他们返回的值常常是带有单位的(如px),同时,对于这种方式,
它只能够获取到该元素的行内样式,而并不能获取到该元素最终计算好的样式,这就是在读取属性值得时候和以上只读属性的区别,要获取计算好的样式,请使用obj.currentstyle(IE)和getComputedStyle(IE之外的浏览器)。另一方面,这些属性能够被赋值,js运动的原理就是通过不断修改这些属性的值而达到其位置改变的,需要注意的是,给这些属性赋值的时候需要带单位的要带上单位,否则不生效。
第二部分 Event对象
在js中,对于元素的运动的操作通常都会涉及到event对象,而event对象也存在很多位置属性,且由于浏览器兼容性问题会导致这些属性间相互混淆,这里一一讲解。
1)clientX和clientY,这对属性是当事件发生时,鼠标点击位置相对于浏览器(可视区)的坐标,即浏览器左上角坐标的(0,0),该属性以浏览器左上角坐标为原点,计算鼠标点击位置距离其左上角的位置,
不管浏览器窗口大小如何变化,都不会影响点击位置的坐标。
js
<script>
var oDiv=document.querySelector('.one');
oDiv.onclick=function(ev){
var evt=ev||event;
console.log(evt.clientX+":"+evt.clientY);
}
</script>
2)screenX和screenY是事件发生时鼠标相对于屏幕的坐标,以设备屏幕的左上角为原点,事件发生时鼠标点击的地方即为该点的screenX和screenY值,
可以看到尽管浏览器窗口被缩到很小,但是坐标值却很大,因为是相对于屏幕坐标而不是浏览器的坐标。
3)offsetX和offsetY
这一对属性是指当事件发生时,鼠标点击位置相对于该事件源的位置,即点击该div,以该div左上角为原点来计算鼠标点击位置的坐标,如下所示:
可以看到,点击该div的靠近左上角处,它的offsetX和offsetY为1,0,需要注意的是,IE,chrome,opera都支持该属性,唯独Firefox不支持该属性,Firefox中与此属性相对应的概念是,event.layerX和event.layerY,所以需要兼容浏览器时,获取鼠标点击位置相对于事件源的坐标的兼容写法为var disX=event.offsetX||event.layerX.
4)pageX和pageY
顾名思义,该属性是事件发生时鼠标点击位置相对于页面的位置,通常浏览器窗口没有出现滚动条时,该属性和event.clientX及event.clientY是等价的,但是当浏览器出现滚动条的时候,pageX通常会大于clientX,因为页面还存在被卷起来的部分的宽度和高度,如下所示:
由于浏览器出现了垂直和水平的滚动条,所以pageX和pageY大于clientX和clientY。
当浏览器的滚动条没有被拖动或者浏览器没有滚动条的时候,两者是相等的。
转载自:http://www.2cto.com/kf/201501/373653.html
js 元素高度宽度整理的更多相关文章
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- js获取页面及个元素高度、宽度
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
- js中高度与宽度的获取
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- js获取高度和宽度
CreateTime--2017年7月24日10:15:47Author:Marydon js获取高度和宽度 参考连接:http://www.cnblogs.com/EasonJim/p/6229 ...
- jq 获取各个元素的宽度高度的方法
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- JS获取各种宽度、高度的简单介绍:
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理
今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...
- jQuery获取页面及个元素高度、宽度
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档 ...
随机推荐
- C++ 虚析构(virtual destructor)原理
注意:本文仅为个人理解,可能有误! 先看一段代码: #include <iostream> using namespace std; class CBase{ public: CBase( ...
- supervisor 与 yii定时任务
https://www.jianshu.com/p/9abffc905645 https://www.cnblogs.com/ajianbeyourself/p/5534737.html https: ...
- Android Studio使用百度地图问题总结
一.常见问题APP Scode码校验失败 一般出现这个问题都是ak不正确导致 可能出错的地方 1.SHA1值没有正确获取 正确获取SHA1值:在左下角打开Terminal终端,进入debug.keys ...
- C2 CompilerThread0 如果抓到的java线程dump里占用CPU最高的线程是这个,99%可能是因为服务重启了
"C2 CompilerThread0" #5 daemon prio=9 os_prio=0 tid=0x00007f20c80b3800 nid=0x57c0 runnable ...
- centos7 下 的lamp 的安装原创详细教程
时间 : 2017-08-03 目标: 基于CENTOS7 安装 LNMP,liunx的安装不做讲解,主要是 NGINX PHP7 MYSQL 的编译安装 第一节 nginx ...
- js原型对象中属性被覆盖(1)
/** *@author 程无衣 *@description 关于在原型对象中属性被覆盖 */ function Person(){} Person.prototy ...
- 清空javascript数组数据
var arrayObj = new Array(); arrayObj.splice(0, arrayObj.length);//清空数组数据
- hive表信息查询:查看表结构、表操作等
转自网友的,主要是自己备份下 有时候不记得! 问题导读:1.如何查看hive表结构?2.如何查看表结构信息?3.如何查看分区信息?4.哪个命令可以模糊搜索表 1.hive模糊搜索表 show tabl ...
- JSP页面获取下来框select选中项的值和文本的方法
<select id="username" name=""> <option value="1">jyy< ...
- Testlink安装:Notice:Undefined index: type in C:\inetpub\wwwroot\testlink-1.9.3\install\installCheck.php on line 41
问题现象: