js中获取元素的当前位置

js中获取当前位置有如下几种方法：

event.offsetX, （IE属性，测试都可以使用）

event.offsetY, （IE属性，测试都可以使用）

event.clientX,

event.clienY,

event.scrennX,

event.screenY,

他们的区别如下：

可以看出，

event.screenX和event.screenY是相对于显示屏的位置。

event.clientX和event.clientY是相对于浏览器的位置。

event.offsetX和event.offsetY是相对于元素的位置。

另外，obj.style.width和obj.offsetWidth以及obj.clientWidth的区别

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style type="text/css">.d{width:200px;height:200px;border:10px #ccc solid;padding:10px;background:red;}</style></head><body><div class="d"></div></body><script type="text/javascript">var d = document.getElementsByClassName('d')[0];console.log(d.clientWidth);                        //220                                                                                                  console.log(getComputedStyle(d,null).width);      //200pxconsole.log(d.offsetWidth);                       //240
<span style="white-space:pre"> </span>console.log(d.style.width);                       //undefined</script>
</html>

这里，

obj.style.width; //undefined; (这种方式是获取content区的宽度，并且是只能获取行内样式！)

getComputedStyle(d,null).width; //200px 是获取的字符串，如果要计算的话，是需要parseInt的

obj.clientWidth = 200(content区宽度) + 10X2(两边的padding) = 220

obj.offsetWidth = 200(content区宽度) + 10X2(两边的padding) + 10X2(两边的border) = 240

另外一个获取位置的属性时，window对象下面的innerHeight，innerWidth，outerHeight，outerWidth

其中，innerHeight，innerWidth是浏览器可视窗口的高度和宽度，不包括上面的地址栏和下面的广告栏，仅仅是指网页的高度和宽度。

而outerHeight，outerWidth是返回的是包括地址栏，标签页以及下面的广告栏的高度和宽度。

js中获取元素的当前位置相关推荐

JS中获取元素的方法
目录一.通过id获取二.通过标签名获取三.通过class名获取四.通过name获取五.通过选择器获取一.通过id获取 document.getElementByid('id名') < ...
js中获取元素的方法总结
1,根据 ID 获取使用 getElementById() 方法可以获取带有 ID 的元素对象. document.getElementById('id'); 使用 console.dir() 可以 ...
js中获取元素对象的四种方式
通过id获取通过元素的ID值获取到某个元素对象返回:单个对象,因为id是唯一的格式 document.getElementById("id名称"); 示例 var span ...
JS中获取元素的第二种方法
1.静态方法 var oUl = document.getElementById(''); 2.动态方法 document.getElementsByTagName(''); 1 <!DOCTY ...
js中Dom元素及获取方法
DOM基础对象 document document.documentElement html部分 document.head document.title document.body body部分 ...
网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法
网页加载的不同的方式 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
java中如何设置浏览器宽度_[Java教程]关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)_星空网...
关于JS中获取浏览器高度和宽度值的多种方法(多浏览器) 2017-08-07 0 三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 d ...
关于js中获取div中的数据
原文地址为: 关于js中获取div中的数据最近用js写了一个计算器的页面.基本上使用到了,ul li的几点用法.用来布局,并且创造出了很不错的鼠标悬停效果. 关于从中学到的知识: document ...
js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test&q ...

js中获取元素的当前位置

js中获取元素的当前位置相关推荐

最新文章

热门文章