浏览器CSSOM：如何获取一个元素的准确位置
winter
该思维导图由 AI 生成，仅供参考
你好，我是 winter。
在前面的课程中，我们已经学习了 DOM 相关的 API，狭义的 DOM API 仅仅包含 DOM 树形结构相关的内容。今天，我们再来学习一类新的 API：CSSOM。
我想，你在最初接触浏览器 API 的时候，应该都有跟我类似的想法：“好想要 element.width、element.height 这样的 API 啊”。
这样的 API 可以直接获取元素的显示相关信息，它们是非常符合人的第一印象直觉的设计，但是，偏偏 DOM API 中没有这样的内容。
随着学习的深入，我才知道，这样的设计是有背后的逻辑的，正如 HTML 和 CSS 分别承担了语义和表现的分工，DOM 和 CSSOM 也有语义和表现的分工。
DOM 中的所有的属性都是用来表现语义的属性，CSSOM 的则都是表现的属性，width 和 height 这类显示相关的属性，都属于我们今天要讲的 CSSOM。
顾名思义，CSSOM 是 CSS 的对象模型，在 W3C 标准中，它包含两个部分：描述样式表和规则等 CSS 的模型部分（CSSOM），和跟元素视图相关的 View 部分（CSSOM View）。
在实际使用中，CSSOM View 比 CSSOM 更常用一些，因为我们很少需要用代码去动态地管理样式表。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了浏览器CSSOM的相关知识，包括CSSOM的基本用法和CSSOM View的API。在CSSOM部分，作者详细介绍了如何获取文档中的所有样式表，以及使用CSSOM API修改样式表内容的方法。此外，还介绍了获取样式表中特定规则并对其进行操作的技巧。另外，作者还详细介绍了CSSStyleRule的属性和使用方法，以及如何使用window.getComputedStyle方法获取元素经过CSS计算得到的属性。在CSSOM View部分，作者介绍了窗口API、滚动API和布局API的相关内容，包括窗口API用于操作浏览器窗口的位置、尺寸等，滚动API用于控制视口滚动和元素滚动，以及布局API用于元素的布局操作。整体而言，本文详细介绍了CSSOM的相关知识，并提供了实际的代码示例，有助于读者快速了解和掌握相关技术特点。文章还提到了全局尺寸信息和元素的布局信息，为读者提供了更全面的知识体系。值得一提的是，文章最后留下了一个问题，鼓励读者通过使用所学的API，将页面上所有盒的轮廓画到一个canvas元素上，为读者提供了一个实践的机会。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59
《重学前端》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(17)
- 最新
- 精选
。。。display:inline;的元素会不会产生盒？作者回复: 会，而且会产生多个盒
2019-10-091
Russell这个咋换行啊。。。 不好意思，老师好，我想咨询浏览器API的种类。 我可以认为是，DOM，BOM，CSSOM这几类么？作者回复: 这是几个大类，还有好多游离的
2019-04-03
阿成Look via gist: https://gist.github.com/aimergenge/2bcf41ac4c4d2586e48ccd5cec5c9768 void function () { const canvas = document.createElement('canvas') canvas.width = document.documentElement.offsetWidth canvas.height = document.documentElement.offsetHeight canvas.style.position = 'absolute' canvas.style.left = '0' canvas.style.right = '0' canvas.style.top = '0' canvas.style.bottom = '0' canvas.style.zIndex = '99999' document.body.appendChild(canvas) const ctx = canvas.getContext('2d') draw(ctx, getAllRects()) function draw (ctx, rects) { let i = 0 ctx.strokeStyle = 'red' window.requestAnimationFrame(_draw) function _draw () { let {x, y, width, height} = rects[i++] ctx.strokeRect(x, y, width, height) if (i < rects.length) { window.requestAnimationFrame(_draw) } else { console.log('%cDONE', 'background-color: green; color: white; padding: 0.3em 0.5em;') } } } function getAllRects () { const allElements = document.querySelectorAll('*') const rects = [] const {x: htmlX, y: htmlY} = document.documentElement.getBoundingClientRect() allElements.forEach(element => { const eachElRects = Array.from(element.getClientRects()).filter(rect => { return rect.width || rect.height }).map(rect => { return { x: rect.x - htmlX, y: rect.y - htmlY, width: rect.width, height: rect.height } }) rects.push(...eachElRects) }) return rects } }()2019-03-16260
welkin希望作者能讲一下虚拟dom 还有浏览器的重绘和重排 以及性能优化，跨域的常用操作(希望细致一点) 包括一些漏洞和攻击，比如xss，sql注入 还有一些技术栈，和一些对于前端需要了解的方案，比如离线方案等2019-03-25614
热心网友好宅💫一直忍着没问，哪来这么多猫片🤣2019-04-253
周飞<body> <canvas id="rect"></canvas> <script type="text/javascript"> const canvas = document.getElementById('rect'); canvas.width =document.documentElement.getBoundingClientRect().width; canvas.height = document.documentElement.getBoundingClientRect().height; canvas.style.position="absolute"; canvas.style.top=0; canvas.style.left=0; canvas.style.border='1px solid red'; const ctx = canvas.getContext('2d'); function travaldom(root){ if(root.tagName && root.tagName !=='text' && root.tagName!=='canvas'){ const startX = root.getBoundingClientRect().x; const startY = root.getBoundingClientRect().y; const width = root.getBoundingClientRect().width; const height = root.getBoundingClientRect().height; ctx.beginPath(); ctx.lineWidth="1"; ctx.strokeStyle="blue"; ctx.rect(startX,startY,width,height); ctx.stroke(); } root.childNodes.forEach(node=>{ travaldom(node); }); } travaldom(document); </script> </body>2019-04-073
痕近痕远请问老师，如何解决UI自动化测试，定位标签显示元素不可见的问题2019-03-173- 宋宋前面讲浏览器渲染时有讲到，CSS经过词法分析和语法分析被解析成一颗抽象语法树。 这个抽象语法树和CSSOM有什么关联么？因为很多文章都讲CSS经过词法分析和语法分析被解析成CSSOM，感觉很疑惑。2019-03-163
pcxpccccx_冲冲冲2020-03-221- Russellemm~~ 我又读了一遍文档，发现了对我来说很关键词，“狭义的”。 那我现在的理解是酱紫的。 广义的理解，就是BOM+DOM，CSSOM是DOM扩展的一部分；如果狭义的认为DOM就是树形结构的话，就可以分出来DOM、CSSOM两部分内容了。 我这样想对么？2019-04-031
收起评论