js 获取某个元素到顶部的高度

js计算元素距离顶部的高度及元素是否在可视区判断

前言: 在业务当中,我们经常要计算元素的大小和元素在页面的位置信息.比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了).有时还要进一步知道,元素是全部都显示在可视区,还是有部分在可视区部分在隐藏内容区.有时还要进一步知道,在隐藏内容区的那一部分是占多大的大小.so,来聊聊如何获取元素的大小和位置信息. 偏移量:计算元素距离顶部的高度在二维的世界里,可以想象成一个二维坐标系.每一个元素在坐标系内都有两个基本的属性:大小和位置. 大小: dom元素在页面的

js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内styl

原生js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内styl

[JavaScript] js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如,这中情况通过上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内style中的属性都不能通过id.style.at

js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的. 获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight){ var clientHeig

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

JS1 js获取dom元素方法

js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其中,domId为要选取元素的id属性值 2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素. 2.通过名称name选取元素(getElementsByName) 1)使用方法:document.getEle

使用js获取伪元素的content

在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素下面是部分代码 //使用js获取伪元素的content String script = "return window.getComputedStyle(document.querySelector('.myTips'),':after').getPropertyValue('content')"; JavascriptExecutor js = (J

关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深水坑我就不多赘述了. 2.问题引入: 当我通过Ajax从后端取到需要展示的数据,拿过来动态渲染到页面上,增加Dom元素是常有的事,这个时候就会报错说Echarts没有获取到元素id. 3.解决方案: 至于要在外面包一个延时器,当然我试了一下即使把延时时间改到0也是能够顺利加载的. 暂时就这么解决了这

获取一个元素距离顶部的位置和window的滚动值

获取一个元素距离顶部的位置: $(".box").offset().top; 获取window的滚动值: $(window).scrollTop();

JS获取DOM元素的八种方法

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法(document.documentElement) 获取body的方法(document.body) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 1.通过ID获

JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值

jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); //获取页面的文档高度 $(document).height(); //获取页面的文档宽度 : $(document).width(); //浏览器当前窗口文档body的高度: $(document.body).height(); //浏览器当前窗口文档body的宽度: $(do

js获取页面元素距离浏览器工作区顶端的距离

先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) document.documentElement.scrollTop //firefox (javascript) document.documentElement.scrollLeft //firefox (javascript) document.body.scr

如何获取div距离浏览器顶部的高度，宽度，内容

JS就可以获取了, document.getElementById("DIV的ID或者其它选择").offsetTop;这是离顶部 JQ可以这样: $("#aaa").offset().top; //jq获取aaa元素距离body的距离 document.getelementbyid("ddhdh").innerHTML 可以获取到div中的全部数据,包括标签...但是只是在IE和OPERA中使用 document.getelementbyid(

JS获取图片的原始宽度和高度

页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" src="1.jpg"> <script type="text/javascript"> var img = document.getElementById("img"); console.log(img.i

javascript js获取html元素各种距离方法

//滚动条 scrollLeft//滚动条距左边距离 scrollTop//滚动条距顶部距离 scrollWidth//滚动条元素的宽 scrollHeight//滚动条元素的高 //可视范围 clientHeight//元素自身可视区域高 clientTop //this.clientW = document.documentElement.clientWidth;//可视宽 //this.clientH = document.documentElement.clientHeight;//可视

如何通过源生js获取一个元素的具体样式值 /* getCss：获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */

昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或者外链样式设置的值是获取不到,因此这个方法在实际项目中用的会比较少. 方法二:通过window.getComputedStyle(dom,null).属性名来获取(针对标准浏览器),在非标准浏览器中这个方法是没有的,我们可以用currentStyle--dom.currentStyle.属性名来实现

获取dom元素的宽度和高度

一.获取css的大小 1.第一种通过内联样式 var box = document.getElementById('box'); var w = box.style.width; var h = box.style.height; 2.通过计算元素的大小(但是在ie情况下有一个问题,那就没写widht和height的css就返回auto); var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null

JS获取DOM元素

1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue 2.children:获取元素节点,浏览器表现相同.因此建议使用children. childNodes返回的是节点的子节点集合,包括元素节点.文本节点还有属性节点.children返回的只是节点的

js获取页面元素的位置

一.网页的大小和浏览器窗口的大小首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的.如果不能全部显示,则滚动浏览器窗口,可以显示出网页的各个部分. 二.获取浏览器窗口的大小网页上的每个元素,都有clientHeight和clie

js 获取某个元素到顶部的高度

热门专题