JS 、JQ 获取宽高总结 & JS中getBoundingClientRect的作用及兼容方案
1、getBoundingClientRect的作用
2.getBoundingClientRect上下左右属性值解释
3. 浏览器兼容性
4、利用getBoundingClientRect来写一个获取html元素相对于视窗的位置集合的方法
<div id="test" style="width: 100px; height: 100px; background: #ddd;"></div>
<script>
function getObjXy(obj){
var xy = obj.getBoundingClientRect();
var top = xy.top - document.documentElement.clientTop + document.documentElement.scrollTop,
//document.documentElement.clientTop 在IE67中始终为2,其他高级点的浏览器为0
bottom = xy.bottom,
left = xy.left - document.documentElement.clientLeft + document.documentElement.scrollLeft,
//document.documentElement.clientLeft 在IE67中始终为2,其他高级点的浏览器为0
right = xy.right,
width = xy.width || right - left, //IE67不存在width 使用right - left获得
height = xy.height || bottom - top; return {
top:top,
right:right,
bottom:bottom,
left:left,
width:width,
height:height
}
} var test = getObjXy(document.getElementById('test'));
alert("top:" + test.top + ", right:" + test.right + ", bottom:" + test.bottom + ", left:" + test.left);
</script>
JS 、JQ 获取宽高总结 & JS中getBoundingClientRect的作用及兼容方案的更多相关文章
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- JS/jQ常用宽高及应用
关于js的宽高,随便一搜就是一大堆.这个一大堆对我来说可不是什么好事,看的头都大了.所以今天就总结了一些比较会常用的,并说明一下应用场景. 先来扯一下documentElement和body的微妙关系 ...
- JS浏览器获取宽高
screen.availHeight is the height the browser's window can have if it is maximized. (including all th ...
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- js 和 jquery 里面几个获取宽高的调查
罗列下 js 和 jquery 里面获取宽高的方法: obj.offsetWidth = $obj.outerWidth() // offsetWidth obj.clientWidth = obj ...
- js|jq获取兄弟节点,父节点,子节点
08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; ...
- 17.在自适应屏幕里通过JQ来获取宽高并赋给需要的
在自适应屏幕里通过JQ来获取宽高并赋给需要的div. var height = document.documentElement.clientHeight; $(window).height();(同 ...
- 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?
此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
随机推荐
- SQL——基础概念
服务器登录名:指有权限登录到某服务器的用户:如sa 服务器角色:指一组固定的服务器用户,默认有9组: 登录名一定属于某些角色,默认为public 服务器角色不容许更改 登录后也不一定有权限操作数据库 ...
- 网络编程-TCP连接-readLine
Server: package com.net.tcp; import java.io.BufferedReader; import java.io.IOException; import java. ...
- Docker 网络模型之 macvlan 详解,图解,实验完整
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 上一篇文章我们 ...
- Qt 生成word、pdf文档
需求:将软件处理的结果保存为一个报告文档,文档中包含表格.图片.文字,格式为word的.doc和.pdf.生成word是为了便于用户编辑. 开发环境:qt4.8.4+vs2010 在qt的官网上对于p ...
- 658. Find K Closest Elements
Given a sorted array, two integers k and x, find the k closest elements to x in the array. The resul ...
- typescript学习笔记(三)---接口
关于第二章的学习笔记是变量声明. 接口:TypeScript的核心原则之一是对值所具有的结构进行类型检查. 它有时被称做“鸭式辨型法”或“结构性子类型化”. 在TypeScript里,接口的作用就是为 ...
- PostgreSQL - 查询表结构和索引信息
前言 PostgreSQL的表一般都是建立在public这个schema下的,假如现在有个数据表t_student,可以用以下几种方式来查询表结构和索引信息. 使用\d元命令查看表字段信息和索引信息 ...
- AtCoder Regular Contest 078 C
C - Splitting Pile Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement Snu ...
- Influxdb 时序数据库 centos 安装
Influxdb 环境搭建 操作系统:CentOS 7 X64 SSH工具:PuTTY 操作系统安装,请参照官网文档进行:https://www.centos.org/ 使用PuTTY 通过ssh连接 ...
- HTML文档设置标记
格式标记 1.<br> 强制换行标记,让后面的文字.图片.表格等,显示在下一行.单标记 2.<p> 换段落标记,换段落是由于多个空格和回车在HTML中会被等效为一个空格,所以H ...