JS中【style】、【getComputedStyle】、【getBoundingClientRect】详解和对比

本文主要是介绍JS中【style】、【getComputedStyle】、【getBoundingClientRect】详解和对比,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. style 属性

style 属性用于直接访问和修改元素的内联样式。通过 JavaScript,可以动态更改元素的样式,但只能操作元素的内联样式,即通过 HTML 中的 style 属性定义的样式。

基本用法:
const element = document.getElementById("myElement");// 修改内联样式
element.style.color = "red";          // 改变文字颜色
element.style.backgroundColor = "blue";  // 改变背景颜色// 读取内联样式
console.log(element.style.color);  // "red"
特点:
  • 只能操作内联样式style 属性仅适用于元素的内联样式。如果样式是通过外部 CSS 文件定义的,style 属性无法获取这些值。
  • CSS 属性名转换:当通过 style 属性操作 CSS 时,需要将属性名从中划线格式(kebab-case)转换为驼峰命名格式(camelCase)。例如,background-color 要写成 backgroundColor
注意事项:
  • 如果通过外部样式表定义样式,使用 style 属性无法读取这些样式。要获取元素的最终呈现样式,应使用 getComputedStyle()

2. getComputedStyle()

getComputedStyle() 方法用于获取元素的最终计算样式,即元素实际显示时所使用的所有样式值。这些样式包含了内联样式、外部样式表以及浏览器默认的样式。

基本用法:
const element = document.getElementById("myElement");
const computedStyle = window.getComputedStyle(element);console.log(computedStyle.color);   // 获取最终应用的文字颜色
console.log(computedStyle.width);   // 获取计算后的宽度(包括外部样式定义)
特点:
  • 返回最终样式getComputedStyle() 获取的是元素所有样式来源(内联、外部 CSS 等)合并后的最终样式,包括已经过浏览器计算的样式值。
  • 返回绝对单位:与 style 属性不同,getComputedStyle() 返回的样式值通常是基于像素的绝对单位。例如,即使宽度是以百分比定义的,它返回的也是计算后的像素值。
示例:
#myElement {width: 50%;color: blue;
}
const element = document.getElementById("myElement");
const computedStyle = window.getComputedStyle(element);console.log(computedStyle.width);   // 获取计算后的宽度,单位为像素
console.log(computedStyle.color);   // "blue"
注意事项:
  • getComputedStyle() 返回的是元素的 最终样式,不论这些样式是否来源于内联样式、外部样式表、还是默认浏览器样式。
  • 返回的值通常为只读,无法直接通过此对象修改样式。

3. getBoundingClientRect()

getBoundingClientRect() 方法返回元素相对于视口(viewport)的边界框信息。调用它会返回一个 DOMRect 对象,该对象包含元素的尺寸(宽度和高度)以及相对于视口的位置(top、left、right、bottom)。

基本用法:
const element = document.getElementById("myElement");
const rect = element.getBoundingClientRect();console.log(rect.top);    // 元素顶部距离视口顶部的距离
console.log(rect.left);   // 元素左边距离视口左边的距离
console.log(rect.width);  // 元素的宽度
console.log(rect.height); // 元素的高度
console.log(rect.x);      // 元素左上角的 x 坐标(等同于 rect.left)
console.log(rect.y);      // 元素左上角的 y 坐标(等同于 rect.top)
DOMRect 对象的属性:
  • x: 元素的左上角相对于视口的水平坐标(等于 rect.left)。
  • y: 元素的左上角相对于视口的垂直坐标(等于 rect.top)。
  • top: 元素顶部距离视口顶部的距离(单位为像素)。
  • left: 元素左边距离视口左边的距离(单位为像素)。
  • right: 元素右边距离视口左边的距离(单位为像素)。
  • bottom: 元素底部距离视口顶部的距离(单位为像素)。
  • width: 元素的宽度(单位为像素)。
  • height: 元素的高度(单位为像素)。
返回的单位:

所有这些属性的单位都是 像素(px,并且都是相对于视口的位置,而不是相对于整个文档。

高分辨率设备上的表现:

在高DPI设备(例如视网膜显示屏)上,getBoundingClientRect() 返回的值基于 CSS 像素,而不是设备物理像素。这意味着返回的尺寸不会因为设备像素比的不同而改变。

示例:
const element = document.getElementById("myElement");
const rect = element.getBoundingClientRect();console.log(rect.top);    // 元素顶部相对于视口的距离,例如 150px
console.log(rect.left);   // 元素左边相对于视口的距离,例如 50px
console.log(rect.width);  // 元素的宽度,例如 200px
console.log(rect.height); // 元素的高度,例如 100px
实际应用:
  • 布局计算:在动态布局中,getBoundingClientRect() 常用于获取元素的确切位置和大小,例如在拖放操作中。
  • 可见性检测:可以通过 topbottom 属性,判断一个元素是否在视口内。
  • 碰撞检测:结合多个元素的 DOMRect 对象,可以检测它们是否发生重叠或碰撞。

总结

  • style 属性用于访问和修改内联样式,只能操作通过 HTML 中的 style 属性定义的样式。
  • getComputedStyle() 获取元素的最终计算样式,返回的是所有来源(内联、外部、默认)的综合样式。
  • getBoundingClientRect() 返回元素相对于视口的位置和尺寸信息,包含 xy 坐标以及 topleftrightbottomwidthheight 等属性,所有值的单位均为像素。

这三者各有用途,可以在 DOM 操作中互为补充,帮助开发者精确控制和获取元素的样式和布局信息。

这篇关于JS中【style】、【getComputedStyle】、【getBoundingClientRect】详解和对比的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1133390

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

MySQL字符串常用函数详解

《MySQL字符串常用函数详解》本文给大家介绍MySQL字符串常用函数,本文结合实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql字符串常用函数一、获取二、大小写转换三、拼接四、截取五、比较、反转、替换六、去空白、填充MySQL字符串常用函数一、

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

MySQL 主从复制部署及验证(示例详解)

《MySQL主从复制部署及验证(示例详解)》本文介绍MySQL主从复制部署步骤及学校管理数据库创建脚本,包含表结构设计、示例数据插入和查询语句,用于验证主从同步功能,感兴趣的朋友一起看看吧... 目录mysql 主从复制部署指南部署步骤1.环境准备2. 主服务器配置3. 创建复制用户4. 获取主服务器状态5

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更