首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js、jQuery 获取文档、窗口、元素各种

(可视区域)高度 : $(window).height(); 获取浏览器显示区域(可视区域)宽度 : $(window).width(); 获取页面的文档高度:$(document).height(...(其会受滚动条影响,相当于整个文档,整个页面的Y) IE9之下并不支持这个属性 clientY: 鼠标相对于浏览器窗口左上角偏移(其不会受滚动条影响,相对于滚动条当前位置浏览窗口...Y) 注意clientY和pageY区别,pageY在页面无滚动条或滚动条下拉0情况下等同于clientY event.offsetX 相对容器水平坐标 event.offsetY...如果找不到具有定位属性元素,那么就相对于当前页面计算偏移,此时等同于pageY。...2.在元素具有上边框border-top情况下, layerY比offsetY多一个border-top宽度

14K32
您找到你想要的搜索结果了吗?
是的
没有找到

用Javascript获取页面元素位置

二、获取网页大小 网页上每个元素,都有clientHeight和clientWidth属性。...三、获取网页大小另一种方法 网页上每个元素还有scrollHeight和scrollWidth属性,指包含滚动条在内元素视觉面积。...首先,每个元素都有offsetTop和offsetLeft属性,表示该元素左上角与父容器(offsetParent对象)左上角距离。所以,只需要将这两个进行累加,就可以得到该元素绝对坐标。...五、获取网页元素相对位置 网页元素相对位置,指该元素左上角相对于浏览器窗口左上角坐标。 有了绝对位置以后,获得相对位置就很容易了,只要将绝对坐标减去页面的滚动条滚动距离就可以了。...六、获取元素位置快速方法 除了上面的函数以外,还有一种快速方法,可以立刻获得网页元素位置。 那就是使用getBoundingClientRect()方法。

3.2K70

js获取元素几种形式

通过id获取元素 document.getElementById('div');//获取id为div元素 通过class获取 document.getElementsByClassName('top'...);//获取页面中所有的class为top元素集合 通过标签名获取 document.getElementsByTagName('p');//获取页面中所有的标签为p元素集合 通过name获取 document.getElementsByName...('user');//获取页面中所有的name为user元素集合 注意:通过class,name标签名抓取元素是一个集合,即使该类只有一个符合要求元素目标,也返回是一个集合,因此可以存储变量,通过变量名...抓取class为例 var tops=document.getElementsByClassName('top');//抓取页面所有class为top集合 tops[0]为第一个符合....简单可以将返回的当做一个存储符合数组,通过下标进行找到指定位置. 当然也可以使用数组方法返回,集合目标数. alert(tops.length)可以提示出class为top目标数

25.2K30

jquery获取第几个子元素_js获取元素指定子元素

先说说通过位置选择几个操作: :first:默认情况下是相对整个页面来说第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul...可以这样理解,页面元素有相同元素 ,并且里面又包含li元素,那么就取第一个li元素,每个子类集合都要进行判断,直到找出所有符合要求li元素; :last-child:这个也与上面相对了,...An+B所有子节点,比如3n+1返回所处位置为父节点子元素是3倍数加1那个子元素; :even:页面范围内处于偶数位置元素,如:li:even返回全部偶数li元素; :odd:页面范围内处于奇数位置元素...; :eq(n):第n个匹配元素(n从0开始),如:li:eq(3)返回整个页面的第四个li元素,ul li:eq(1)返回页面中第一个ul元素第二个li元素,注意:只匹配一次就返回了; :gt...C等效于*.C; E#I:匹配id为I所有元素E,#I等效于*#I; E[A]:匹配带有属性A所有元素E; E[A=V]:匹配所有属性A为V元素E; E[A^=V]:匹配所有元素E,且A属性

27K30

获取页面中被选中元素 JS原生方法 与 jQuery方法 分析

方式查看属性,这就是方式一 与 方式二 方式三 是通过选择器方式获取元素,再获取属性,但是这里有一个坑,当再input标签中写了checked属性时,可以获取,但是如果没有写,而是在页面上让用户点击...---- 方式4 是先获取元素,在判断他是不是有 checked 属性,但是同样他有和方法三 一样缺陷 补充 然而说到获取属性,我们一定会想到getAttribute() 方法,返回是属性...或者 null,但是这个方法来获取checked属性,并不好用,他有和方法三 一样缺陷,他始终都只会获取checked属性初始,用户在页面上点击是不会改变他!...DOM 元素),后面这个 .checked,应该算是js原生,类似于js原生 方法二 方法二 is() 方法用于查看选择元素是否匹配选择器,:checked 是jQuery中选择器 选取所有被选中元素...原生方法一 总结 获取页面被选中元素方法有很多,最后这里推荐几种简单实用 js原生方法 方法一: document.getElementById(elementID)["checked

5K20

原生JS 实现页面元素拖动 拖拽

实现原理 要实现页面元素拖动,其原理就是根据鼠标的移动实时更改元素left 和 top(当然元素肯定是要做绝对定位),那么就达到我们要效果了呀!...鼠标的位置是可以通过 e.clientX 获取,通过获取减去鼠标和目标元素之间偏移量,就是我们 left 值了呗, top是同理,不过记住要设置界限哟,不然跑出去了。...var e_down = e || window.event; // 计算鼠标点击位置 和 目标元素之间 偏移量 var x = e_down.clientX - e_down.target.offsetLeft...; var y = e_down.clientY - e_down.target.offsetTop; // 我们想要拖拽元素,其实就是根据鼠标的移动实时更改元素left 和 top // 鼠标的位置是可以通过...e.clientX 获取,然后减去x 不就是我们left值了 //鼠标移动,肯定是在按住情况下移动嘛 document.onmousemove = function(e){ var

5.2K30

js:如何获取select选中

我想获取select选中value,或者text,或者…… 比如这个: <option value=”A” url=”http://www.baidu.com...; // selectedIndex代表是你所选中项index 3:拿到选中项optionsvalue: myselect.options[index].value; 4:拿到选中项options...text: myselect.options[index].text; 5:拿到选中项其他,比如这里url: myselect.options[index].getAttribute(‘url’...); 二:jQuery方法 1:var options=$(“#select option:selected”); //获取选中项 2:alert(options.val()); //拿到选中项...3:alert(options.text()); //拿到选中项文本 4:alert(options.attr(‘url’)); //拿到选中项url 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人

26.2K30

几种常见获取页面元素数据方法

页面之所以是动态,其实不仅仅是因为他是具有js动态效果,还有一部分是因为他数据是动态,所以页面才会显得很有活性,但是很多时候获取数据是一个很恶心事情,动不动就拿不到数据,作为一个前端,其实很大一部分时间也都是在处理数据...,今天简单将常见几种获取数据办法记录一下,不为别的,以后可以直接用,虽然简单要死,但是还是记录一下比较好,说不定哪天脑子抽风忘记了.... ?... PS:页面操作dom元素时候,如果是操作是name,那么是不可以直接拿到数据,是因为页面上是允许多个name属性,所以nana取得其实是元素,不是数据,也就是说您可以在一个页面上面写很多name...,最后获取是所有的长度。

64410
领券