getBoundingClientRect()兼容性处理

getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离 alert(box.getBoundingClientRect().right);…

[转] getBoundingClientRect判断元素是否可见

getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置.getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分). 该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height:这里的top.left和css中的理解很相似,width.heigh…

JS中关于位置和尺寸的api

HTMLElement.offsetParent 由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的,故offsetParent的意义十分重大.offsetParent的机制与css中包含块的概念十分类似但并不完全一致,其不一致有时候是由于浏览器的不同而导致的,例如:当元素为固定定位时(fixed),chrome浏览器的 offsetParent 值为 Null,而火狐的则为 body 元素.总结规律如下: 规则(当html和body之间的mar…

position:sticky的兼容性尝试

开篇笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后,逐渐接触到具体的业务.在这里主要介绍下关于css3草案的position:sticky属性的兼容. 问题目前前端的h5有个需求,就是"当页面上的若干个标题被拖动到视口的顶部时,则显示一个被定位到视口的顶部的tab标签,可对这个tab标签进行点击导航,并在某个特殊的情况下隐藏".最简单粗暴…

js中getBoundingClientRect的作用及兼容方案

js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合. 执行 object.getBoundingClientRect();会得到元素的top.right.bottom.left.width.height属性,这些属性以一个对象的方式返回. 2.getBoundingClientRect上下左右属性值解释主要是left和bottom要…

利用getBoundingClientRect方法实现简洁的sticky组件

补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类元素提供的操作.本文介绍这种组件的实现思路,并提供一个同时支持将sticky元素固定在顶部或底部的具体实现,由于这种组件在网站中非常常见,所以有必要掌握它的实现方式,以便在有需要的时候基于它的思路写出功能更多的组件出来…

获取元素位置信息：getBoundingClientRect

一个神奇的方法. 一.历史偷个懒,上个传送门:http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html 二.介绍 DOM元素方法,返回一个TextRectangle对象,包含top,left,bottom,right,width,height六个属性,表示元素相对于浏览器显示区域的四个偏移量和元素自身的宽高,都是number,表示的是像素值. document.body.getBoundingClientRect().top doc…

getBoundingClientRect的用法

getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 1.语法:这个方法没有参数. rectObject = object.getBoundingClientRect(); 2.返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上, 右 , 下,和左 )表示的坐标的矩形,以像素为单位. rectObject.top:元素上边到视窗上边的距离; rectObject.right:元素右…

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

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

js获取元素位置和style的兼容性写法

今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedStyle,currentStyle 配角:getPropertyValue,getAttribute getBoundingClientRect: 这个方法返回一个矩形对象,包含六个属性:left.top.width.height.right和bottom(ie下没有width和height).分别…

元素高度、宽度获取 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…

利用getBoundingClientRect()来实现div容器滚动固定

ele.getBoundingClientRect()的方法是可以获得一个元素在整个视图窗口的位置可以return的值有width,height,top,left,x,y,right,bottom 场景当你的一个div是处在viewport的一个中部位置你想要的效果是当页面滚动到这个div的时候,这个div就固定在页面的顶部位置,其它滚动不变思路实现的思路可以利用这个方法来拿到这个div的top值这个top值就是这个div到viewport的top值监听页面的滚动事件然后当这个t…

javascript getBoundingClientRect()获取元素四个边相对于窗口或文档的位置

Element.getBoundingClientRect()返回元素的大小及相对于窗口的位置语法: rectObject=object.getBoundingClientRect(); 返回值是一个DOMRect对象,即DOMRect={x:scrollLeft,y:scrollY,width:val1,height:val2,top:topPosition,left:leftPosition,bottom:bottomPosition,right:rightPosition}共8个属性.…

getBoundingClientRect说明

getBoundingClientRect用于获取某个元素相对于视窗的位置集合. 1.语法:这个方法没有参数. rectObject = object.getBoundingClientRect() 2.返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上, 右 , 下,和左 )表示的坐标的矩形,以像素为单位. rectObject.top:元素上边到视窗上边的距离; rectObject.right:元素右边到视窗左边的距离; rectObject.bottom:元素下边…

JS 、JQ 获取宽高总结 & JS中getBoundingClientRect的作用及兼容方案

1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合. 执行 object.getBoundingClientRect();会得到元素的top.right.bottom.left.width.height属性,这些属性以一个对象的方式返回. 2.getBoundingClientRect上下左右属性值解释主要是left和bottom要解释一下,left是指右边到页面最左边的距离,bottom是指底边…

getBoundingClientRect使用指南

getBoundingClientRect使用指南 author: @TiffanysBear 主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题. getBoundingClientRect Element.getBoundingClientRect() 含义: 方法返回元素的大小及其相对于视口的位置. 值: 返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相…

前端好用API之getBoundingClientRect

前情在前端开发需求中,经常需要获取元素的尺寸位置相关的属性,以往的做法是调用不同api获取相关属性的. getBoundingClientRect介绍 getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 标准盒子模型:元素的尺寸等于width/height + padding + border-width的总和.如果box-sizing: border-box,则元素的的尺寸等于 width/height. top, left, right, bottom属…

前端css兼容性与易混淆的点

一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibility: hidden; overflow: hidden; } 解读浮动闭合最佳方案:clearfix 二.使用斜杠/分割的关键字 1.font H2{ font:12px/100% sans-serif; } 分割的分别是字体大小与行高 ,其他关键是用空白符分割. 2.background div{…

SQL Server2008R2 在windows8上安装，出现“兼容性”和 “执行未经授权的操作”的错误！

本人是windows8.1的操作系统,亲测安装成功解决方法如下: 1.卸载干净sql Server2008r2,包括注册表内容,删除c盘下的安装路径! 2.关闭防火墙(这步很重要) 3.断开网络连接 4.以管理员身份运行安装 5.不以兼容模式运行!在"setup.exe"属性下,tab选项卡中兼容性,勾除掉. 这篇文章转载自http://www.cnblogs.com/w519/p/3570425.html 我要感谢这个牛人,不然我就要重做系统或者在虚拟机中安装了.…

[转载]强制不使用“兼容性视图”的HTML代码

在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动选择"兼容性视图",强制IE以最高级别的可用模式显示内容呢?下面就介绍一段HTML代码. X-UA-Compatible是一个设置IE浏览器兼容模式的属性,在IE8浏览器之后诞生.IE8或者IE9有很多种模式,比如,IE8有4种模式:IE5.5怪异模式.IE7标准模式.IE8几乎标准模式.IE8标准模式:而IE9有7种模式: IE5.5怪异模式.IE7标准模式.IE8几乎标准…

企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题

企业IT管理员IE11升级指南系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flash的支持 [3]—— IE11 新的GPO设置 [4]—— IE企业模式介绍 [5]—— 不跟踪(DNT)例外 [6]—— Internet Explorer 11面向IT专业人员的常见问题 [7]—— Win7和Win8.1上的IE11功能对比 [8]—— Win7 IE8和Win7 IE11对比…

浅谈WebService的版本兼容性设计

在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所有这些客户端的需求,实现前后端的分离,一种最常见的做法是,编写WebService API来为以上客户端提供数据.近年来越来越多的企业或者网站支持Restfull方式的WebService,比如当当网开源Dubbox,扩展Dubbo服务框架支持REST风格远程调用,这个是Java版本的,在.NET中…

常用原生JS方法总结（兼容性写法）

经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(typ…

Atitit Atitit.软件兼容性原理----------API兼容 Qa7

Atitit Atitit.软件兼容性原理----------API兼容 Qa7 1. 兼容性的重要性与反面教材1 2. 提升兼容性的原则2 2.1. What 与how 分离2 2.2. 老人老办法,新人新办法,只新增,少修改,莫删除3 2.3. 计划赶不上变化,永远api修改也不可能整齐划一,反而带来不兼容的风险3 3. 把握API的生命周期andAPI分级3 4. 对兼容性保持友好的api设计方法3 4.1. 细粒度的方法3 4.2. Ioc容器动态配置3 4.3. 把你的method()…

Atitit.兼具兼容性和扩展性的配置方案attilax总结

Atitit.兼具兼容性和扩展性的配置方案attilax总结文件配置法1 Jdbc多数据源文件配置发1 Bat文件配置法1 改进的文件配置法(采用类似i18n技术) 推荐1 使用自动化pc_id的方法来自适应配置推荐1 文件配置法换了机子又要设置 Jdbc多数据源文件配置发使用一个tag来标记使用的哪个配置.可以包含多配置 useTag=ati /ati2 P1_ati=000 P1_ati2=111 标记适合7个字段以内的配置. Bat文件配置法缺点是开发的时候设置参数比较麻烦,换了…

Atitit.软件架构高扩展性and兼容性原理与概论实践attilax总结

Atitit.软件架构高扩展性and兼容性原理与概论实践attilax总结 1. 什么是可扩展的应用程序?1 2. 松耦合(ioc)2 3. 接口的思考 2 4. 单一用途&模块化,小粒度化2 5. 组合(Composition),而不是继承(inheritance) 2 6. Ocp原则开闭原则2 7. Plugin系统2 8. 流程扩展工作流系统,流程自定义2 9. Ui扩展 html53 10. 数据独立性3 11. 脚本与hotdeploy3 12. 表处理扩展if else (数据与数…

IE7,6与Fireofx的CSS兼容性处理方法集结

CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声明. 一.CSS 1.vertical-align:middle文字垂直居中,对于某些元素如div{width:200px;height:200px;}不会有效果,只需给div{line-height:200px;}…

push方法的兼容性问题

在IE8及以下中,不支持aplly方法中的第二个参数是伪数组需要对push方法进行封装. 将 push 的判断,放入一个沙箱中: 好处:在页面加载的时候就会执行这段代码,保证了代码只会检测一次以后的操作中直接使用调用 push 即可.jquery源码中也是这样封装的,在用jquery操作DOM元素时,不需要考虑此兼容性问题啦 var push = [].push; try { // 判断 push 是否可用 var container = document.createElement("d…

Atitit.软件兼容性原理与实践 v5 qa2.docx

Atitit.软件兼容性原理与实践 v5 qa2.docx 1. Keyword2 2. 提升兼容性的原则2 2.1. What 与how 分离2 2.2. 老人老办法,新人新办法,只新增,少修改,莫删除2 2.3. 计划赶不上变化,永远api修改也不可能整齐划一,反而带来不兼容的风险2 3. 兼容性的重要性与反面教材2 4. 架构and模块兼容性3 4.1. 粒度最小化,得到最好的灵活性3 4.2. 多套ui/xx模块,如何兼容3 4.3. 要是计划新的模块,老的模块可以不修改同步,推荐新…

CSS中一些常见的兼容性问题

CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. CSS hack主要有三种:IE条件注释法.CSS属性前缀法.选择器前缀法. (1)IE条件注释法,即在正常代码之外添加判别IE浏览器或对应版本的条件注释,符合条件的浏览器或者版本号才回执行里边的代码. 1 <!--[…

【getBoundingClientRect()兼容性处理】的更多相关文章