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

JavaScript与jQuery获取元素的宽、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法,比较全面,方便自己和需要并搜到此文章的朋友们查看。...) offsetParent :元素的偏移容器(父元素) offsetTop :元素的相对垂直偏移位置(上边界距离可视区域最上边的距离) 事迹宽高 scrollHeight :整个元素的高度(包括带滚动条的隐蔽的地方...:是该元素的显示(可见)的内容与该元素实际的内容的距离(滚动条滚去的高度) jQuery中: ?...元素的位置偏移量 offset() :返回包含 top 和 left 两个属性的对象,相对于 document 文档的坐标。...position():返回包含top和left两个属性的对象,相对于最近的已定位的包含元素的位置。若无,则相对于document。

3.1K00
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jquery操作元素的位置

    var offset = p.offset(); //获取到这个元素的位置       p.html( "left: " + offset.left + ", top: " + offset.top...visibility:hidden; 可以获取到坐标,         如果元素设置的是 display:none; 位置值是 undefined;   .offset(coordinates...() 这个方法不接受任何参数.position() 可以获取得元素相对于父元素的偏移位置。...+ position.left + ", top: " + position.top ); .scrollLeft()   获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条的的距离...$("div.demo").scrollLeft(300); .scrollTop()   获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条的距离。

    3.4K60

    用Javascript获取页面元素的位置

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

    3.3K70

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

    val(); $( this ).children( "input:last-child" ).val(); 通过>选择器,$(“.items>input:first”) 在这里转一篇《jQuery...先说说通过位置选择的几个操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul...只是取的是最后一个; :only– child:返回所有没有兄弟节点的元素,注意,文本元素不是,也就是说类似这样的hellojquery,对于这段会选出...An+B的所有子节点,比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素; :even:页面范围内的处于偶数位置的元素,如:li:even返回全部偶数li元素; :odd:页面范围内的处于奇数位置的元素...V开头的; E[A 4.利用jQuery自定义的选择器进行选择: :button:选择任何按钮类型的元素,包括input[type=submit]等等; :checkbox:选择复选框元素; :file

    27.2K30

    jquery 获取鼠标和元素的坐标点

    ; console.log(pageX+' '+pageY); }) 1,获取对象 var obj = $(“#image”); 2,获取对象元素的位置...(offset()方法) var offset = obj.offset(); 获取对象元素的位置,分别是元素的top和left,调用方法是:offset.left和offset.top,可知当前对象的左部和顶部位置...3,获取对象元素的宽度(width()方法) var right = offset.left+obj.width(); 实例中是获取对象的右下角位置,创建新窗口的左部位置。...4,获取对象元素的高度(height()方法) var down =offset.top+obj.height(); 实例中是获取对象的右下角位置,创建新窗口的顶部位置。...5.获取对象相对于父元素的位置(position()方法)   var x = obj.position().top;   var y =obj.position().left; <scripttype

    2.4K41

    jquery 与javascript 获取元素尺寸大小的对比

    jquery获取尺寸的方法 width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。 height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。...innerWidth() 方法返回元素的宽度(包括内边距)。 innerHeight() 方法返回元素的高度(包括内边距)。 outerWidth() 方法返回元素的宽度(包括内边距和边框)。...outerHeight() 方法返回元素的高度(包括内边距和边框)。 js获取尺寸的方法 clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。...offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。 Window 尺寸 有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。...4.style.width仅能返回以style方式定义的内部样式表的width属性值。

    1.8K30

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

    基于两年开发经验,总结了 javascript、jQuery 获取窗口、文档、元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: document.body.clientWidth...; 获取元素的宽度:clientWidth;(width+padding) 获取元素的高度:clientHeight;(height+padding) 获取元素的宽度:offsetWidth;(width...(即网页被卷左去的宽度):$(document).scrollLeft(); 获取或设置元素的宽度:$(obj).width();(width) 注意只是元素的宽度,不包括padding 获取或设置元素的高度...:$(obj).height();(height) 注意只是元素的高度,不包括padding 获取或设置元素的宽度:$(obj).innerWidth(); (width + padding) 获取或设置元素的高度...(其值不会受滚动条影响,相对于滚动条当前的位置的浏览窗口的Y值) 注意clientY和pageY的区别,pageY在页面无滚动条或滚动条下拉0的情况下值等同于clientY event.offsetX

    14.1K32

    JavaScript 获取鼠标及元素在页面上的位置

    HTML5学堂:JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还有哪些属性可以获取鼠标的位置信息?...另外,还有哪些能快速获取标签在页面中的位置信息? 在书写一些“拖拽”页面交互效果,比如常见的拖拽效果、自定滚动条、放大镜等效果,都需要用到了鼠标或元素在页面上的位置信息。...另外,也要跟大家分享一个方法,它能快速的获取元素在页面上的位置信息,不同于之前学过的offsetLeft等属性,它就是——getBoundingClientRect()方法 回顾clientX/Y获取鼠标位置的方式...等属性来获取元素的尺寸、位置等信息,想具体了解的可以回复“元素信息”到HTML5学堂公众号。...今天要给大家分享的是另外一种快速获取元素在页面上的位置,赶紧尝试书写一下下面的实例 代码实例: <!

    3.4K60
    领券