【DOM.getBoundingClientRect()】的更多相关文章

DOM.getBoundingClientRect()

…

getBoundingClientRect方法获取元素在页面中的相对位置

获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBoundingClientRect 方法则兼容性较好,基本所有的浏览器都支持了,且使用起来更容易和简单. 1.使用语法: element.getBoundingClientRect(); 方法中没有任何参数,返回值为对象类型. 2.在IE8及以下的浏览器中,返回值对象包含的属性值有: top::元素上边缘距离文档…

元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect

1.示例代码 (1)html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js获取宽度</title> <style type="text/css"> #app{ width: 300px !important; } </style> <link rel="stylesheet&q…

快速获取dom到body左侧和顶部的距离，简单粗暴无bug-getBoundingClientRect

获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候,偶尔会需要用js来获取当前div到 body 左侧.顶部的距离.网上查一查,有很多都是通过offsetTop.offsetLeft来计算出来的.我按照网上的查到的资料用了一次,算出来了一堆错误答案. 下面我要分享的这个方法,兼容性很好(ie4都ok),而且很方便,不会算错. 这个方法就是 getBoundingClientRect. 1.getBoundingClientRect方法简介 get…

javascript零散要点收集

1.this永远指向函数对象的所有者 2.ECMA-262 把对象(object)定义为“属性的无序集合,每个属性存放一个原始值.对象或函数”.严格来说,这意味着对象是无特定顺序的值的数组. 3.prototype只有函数对象才会有的属性. 4.对象创建之后为其附加的属性不会被继承. 5.new 创建对象只能来自于函数对象. 5.1也可以直接创建对象实例 6.for in可遍历对象属性 7.obj.prototype.constructor会输出obj创建时用的函数的文本. 8.极度延迟 9.g…

深入理解CSS盒模型

如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起.这种看似简单的题其实是最不好答的. 下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 基本概念 盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒…

javascript设计模式——策略模式

前面的话 在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方案就是本文将要介绍的策略模式.策略模式是指定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换 奖金计算 策略模式有着广泛的应用.以年终奖的计算为例进行介绍.很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的.例如,绩效为S的人年终奖有4倍工资,绩效为A的人年终奖有3倍工资,而绩效…

javascript设计模式——命令模式

前面的话 假设有一个快餐店,而我是该餐厅的点餐服务员,那么我一天的工作应该是这样的:当某位客人点餐或者打来订餐电话后,我会把他的需求都写在清单上,然后交给厨房,客人不用关心是哪些厨师帮他炒菜.餐厅还可以满足客人需要的定时服务,比如客人可能当前正在回家的路上,要求1个小时后才开始炒他的菜,只要订单还在,厨师就不会忘记.客人也可以很方便地打电话来撤销订单.另外如果有太多的客人点餐,厨房可以按照订单的顺序排队炒菜.这些记录着订餐信息的清单,便是命令模式中的命令对象.本文将详细介绍命令模式 概念 命令模…

jsLibrary.js

以前看犀牛书收藏和组合别人的库. ; (function () { 'use strict'; if (!Date.now) Date.now = function () { return new Date().getTime(); }; var vendors = ['webkit', 'moz']; for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { var vp = vendor…

JS实现div的抖动：缓动式抖动

代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 { width: 100px; height: 100px; position: absolute; left: 400px; top: 200px; background: red; } </style>…