getBoundingClientRect（）

getBoundingClientRect()获取元素位置，这个方法没有参数

getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。

getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

<div id="box"></div>

var object=document.getElementById('box');

rectObject = object.getBoundingClientRect();

    rectObject.top：元素上边到视窗上边的距离;

    rectObject.right：元素右边到视窗左边的距离;

    rectObject.bottom：元素下边到视窗上边的距离;

    rectObject.left：元素左边到视窗左边的距离;

    rectObject.width：是元素自身的宽

    rectObject.height是元素自身的高

在ie7及ie7以下的html元素坐标会从(2, 2)开始算起，在ie8已经修复了这个bug。这就是多出两个像素的原因

获取某个html元素相对于视窗的位置集合的更多相关文章

  1. 获取某个元素相对于视窗的位置-getBoundingClientRect

    1. getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 语法:这个方法没有参数 rectObject = ...

  2. getBoundingClientRect获取元素在页面上的位置

    getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置. getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起 ...

  3. JQuery 获取页面某一元素在屏幕上的位置

    获取页面某一元素的绝对X,Y坐标 var X = $('#ElementID').offset().top;//元素在当前视窗距离顶部的位置 var Y = $('#ElementID').offse ...

  4. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

  5. JS/jquery获取iframe内部元素和ifame中获取外部元素精华

    1.从外部获取iframe内部元素方法: js : window.frames['frame'].document.getElementById("imglist");   //f ...

  6. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  7. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

  8. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  9. jquery获取、改变元素属性值

    //标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...

随机推荐

  1. 消息队列，IPC机制（进程间通信），生产者消费者模型，线程及相关

    消息队列 创建 ''' Queue是模块multiprocessing中的一个类我们也可以这样导入from multiprocessing import Queue,创 建时queue = Queue ...

  2. Golang 的 `[]interface{}` 类型

    Golang 的 []interface{} 类型 我其实不太喜欢使用 Go 语言的 interface{} 类型,一般情况下我宁愿多写几个函数:XxxInt, XxxFloat, XxxString ...

  3. Spring 源码（14）Spring Bean 的创建过程（5）

    到目前为止,我们知道Spring创建Bean对象有5中方法,分别是: 使用FactoryBean的getObject方法创建 使用BeanPostProcessor的子接口InstantiationA ...

  4. unity---监听物体被点击

    脚本 public void OnPointerClick(PointerEventData eventData) { Debug.LogFormat("{0} is Click" ...

  5. Spark框架——WordCount案例实现

    package wordcount import org.apache.spark.rdd.RDD import org.apache.spark.{SparkConf, SparkContext} ...

  6. 个人冲刺（六）——体温上报app（二阶段）

    冲刺任务:完成主页面功能 MainActivity.java package com.example.helloworld; import android.app.AlertDialog; impor ...

  7. .NET MAUI 正式发布，再见了 Xamarin.Forms

    David Ortinau 在dotnet 团队博客上发表了一篇文章<Introducing .NET MAUI – One Codebase, Many Platforms>,在这篇文章 ...

  8. 使用C#和MonoGame开发俄罗斯方块游戏

    小的时候就看到有同学使用C语言在DOS下做过一款俄罗斯方块的游戏,当时是启用了DOS的图形化模式,感觉也挺有意思.最近上海疫情封控在家,周末也稍微有点空余时间,于是使用Visual Studio 20 ...

  9. TornadoFx实现侧边栏菜单效果

    原文地址:TornadoFx实现侧边栏菜单效果 - Stars-One的杂货小窝 之前年前研究的东西,给蓝奏批量下载器重构了页面,实现了侧边栏菜单的效果,稍微总结下把 效果 实现 首先,要说明的是,总 ...

  10. iview 酸爽debug: subMenu默认选中无效的解决方法

    一. 在iview中写一个submenu <Col span="3" type="flex" v-if="showCids"> ...