TextRectangle
对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释。
对于 i,span,em等display 是inline的标签,在书写文本的时候可能存在换行,像下图:
每个红色的框,就是一个TextRectangle对象。
使用 getClientRects() 方法可以得到一个TextRectangle 的list。 每个对象代表一个红框
如果使用 getBoundingClientRect(). 则会得到一个包含这4个红框的一个最小矩形,当然也是一个TextRectangle对象。
如果把em display设置成inlineblock,那么 无论调用者两个方法中的哪一个,都只返回一个TextRectangle对象。
浏览器差异
除了safari,firefox2.0外所有浏览器都支持getClientRects和getBoundingClientRect,
firefox 3.1给TextRectangle增加了 width 和 height。
ie 和非ie浏览器在使用getClientRects还是有些差别的,ie获取TextRectangleList的范围很大。而非ie获取的范围比较小, 只有display:inline的对象才能获取到TextRectangleList,例如em i span 等标签。
使用场景
现 在用得最多的是getBoundingClientRect,这个直接返回一个TextRectangle,其实大家经常使用它来获取到一个 element的viewport坐标.其实就算dom里面没有文本也能返回一个 TextRectangle. 这样就不需要向上遍历来计算对象的相对坐标了。
CSSOM之getboundingclientrect和getclientrects的更多相关文章
-
聊聊 getClientRects 和 getBoundingClientRect 方法
开始表演 今天来聊一下两个相似的方法,它们就是:getBoundingClientRect().getClientRects(). 只见它们俩手拉手地登上了舞台,一个鞠躬,便开始滔滔不绝起来. 自述 ...
-
CSSOM View Module
就在8月份,也就是上次gf大姨妈来的时候,W3C出炉了CSSOM视图模块(CSS Object Model View)草案.CSSOM视图模块(CSSOM View Module)定义了一些 API, ...
-
[转] CSSOM视图模式(CSSOM View Module)相关整理
以下就是一些API属性的相关内容,包括兼容性,使用,测试等. 一.Window视图属性 这些属性可以hold住整个浏览器窗体大小.微软则将这些API称为“Screenview 接口”.包括:inner ...
-
CSSOM视图模式(CSSOM View Module)相关整理(转载)
原文地址 http://www.zhangxinxu.com/wordpress/?p=1907 一.Window视图属性 这些属性可以hold住整个浏览器窗体大小.微软则将这些API称为“Scree ...
-
Safari on iOS 7 中Element.getClientRects的Bug
在Safari浏览器中,DOMElement和Range对象都提供了getBoundingClientRect方法和getClientRects方法.顾名思义,getBoundingClientRec ...
-
企业IT管理员IE11升级指南【8】—— Win7 IE8和Win7 IE11对比
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
-
JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)
1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点 >>HtmlElement与 ...
-
常见的原生javascript DOM操作
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
-
js dom 操作技巧
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
-
KVM 虚拟机联网方式:NAT 和 Bridge
KVM 客户机网络连接有两种方式: 用户网络(User Networking):让虚拟机访问主机.互联网或本地网络上的资源的简单方法,但是不能从网络或其他的客户机访问客户机,性能上也需要大的调整.NA ...
-
UWP 解决Webview在Pivot里面无法左右滑动的问题
//为了解决webview在PivotItem里面,阻止pivot左右滑动. if (webView != null) { rootGrid.Children.Remove(webView); web ...
-
sublime配置react
http://www.cnblogs.com/terrylin/p/4942332.html
-
[Cocos2D-x For WP8]Label标签
Label标签主要会用于在游戏中显示一些文字字符串类型的信息.那么在Cocos2D-x里面主要会有下面的一些创建标签的方式: 1.使用CCLabelTTF类生成系统文字的标签,编程语法如下: CCLa ...
-
Hadoop学习笔记:MapReduce框架详解
开始聊mapreduce,mapreduce是hadoop的计算框架,我学hadoop是从hive开始入手,再到hdfs,当我学习hdfs时候,就感觉到hdfs和mapreduce关系的紧密.这个可能 ...
-
c++ 语言细节
#include <iostream>using namespace std;int main(){ cout << "\nHello World!\n&qu ...
-
BOM浏览器对象
BOM 浏览器对象 一.浏览器本身就自己有一些对象,不用创建就可以使用 window(当前浏览器窗体) 属性: status opener closed parent top 方法: alert(); ...
-
java读取各种类型文件
用到的几个包 bcmail-jdk14-132.jar/bcprov-jdk14-132.jar/checkstyle-all-4.2.jar/FontBox-0.1.0-dev.jar/lucene ...
-
vue路由跳转到指定页面
1.this.$router.push({name:'Home'}) 2.this.$router.push({path:'/view'}) 3.this.$router.replace({name: ...
-
关于metaspolit中进行JAVA反序列化渗透RMI的原理分析
一.背景: 这里需要对java反序列化有点了解,在这里得推广下自己的博客嘛,虽然写的不好,广告还是要做的.原谅我: 1.java反序列化漏洞原理研习 2.java反序列化漏洞的检测 二.攻击手法简介 ...