前端 JavaScript 代码如何获取元素样式

获取前端JavaScript中元素的样式可以通过多种方式实现，包括使用 window.getComputedStyle() 方法、元素的 style 属性和IE特有的 currentStyle。通过 window.getComputedStyle() 方法获取非行内样式（即通过外部或内部CSS设置的样式）、通过元素的 style 属性可直接获取到设置在该元素上的行内样式，并且可以用这种方式修改它。currentStyle 属性是微软IE浏览器的特性，它可以获取当前最终应用在元素上的所有样式。

window.getComputedStyle() 是最常用且标准的方法去获取元素的所有最终样式。此方法接受两个参数：第一个是元素节点，第二个是伪元素字符串（如果不是伪元素，则为 null 或省略）。这个方法返回的是一个CSS样式声明对象（CSSStyleDeclaration），包含了元素对应的所有样式，通过这个对象我们可以查询到任意CSS属性值。

一、使用 window.getComputedStyle()

获取非行内样式

window.getComputedStyle() 让我们可以访问到在元素上最终的CSS属性值，无论这些样式是在内联样式中定义的，还是在外部或内部的CSS样式表中定义的。

let elem = document.querySelector("#myElement");

let style = window.getComputedStyle(elem);
let color = style.color; // 获取字体颜色
let width = style.width; // 获取元素宽度

考虑浏览器兼容性

尽管 getComputedStyle() 是一个标准方法，但老版本的IE浏览器不支持，因此在实际开发中可能还需要考虑兼容性问题。通常我们会编写函数来兼顾不同的浏览器。

二、使用元素的 style 属性

获取或设置行内样式

每个DOM元素都拥有一个 style 属性，这个属性可以用来获取或设置元素的行内样式（inline style）。这种方法不能获取到那些不是行内样式的CSS样式。

let elem = document.getElementById("myElement");

let bgColor = elem.style.backgroundColor; // 获取元素的背景颜色
elem.style.color = "blue"; // 设置元素的字体颜色为蓝色

只能获取行内样式的局限性

此方法只能访问到在元素的style属性中直接定义的样式，对于那些通过样式表定义的样式是不可见的。

三、考虑IE的 currentStyle

IE中获取计算后的样式

在IE浏览器中以前使用 currentStyle 属性来获取元素的当前所有最终使用的CSS属性。

let elem = document.getElementById("myElement");

let style = elem.currentStyle || window.getComputedStyle(elem, null);
let color = style.color; // 获取字体颜色

四、使用 getComputedStyle() 的高级特性

获取伪元素样式

window.getComputedStyle() 不仅可以用于普通元素，还可以用来获取伪元素（如：:before、:after）的样式。

let beforeStyle = window.getComputedStyle(elem, ':before');

let content = beforeStyle.content; // 获取伪元素的内容

注意事项和技巧

当使用 getComputedStyle() 获取复合属性如 margin、padding 时，通常返回的是空字符串或 auto。为了获得更准确的值，应该获取单独的属性，例如 marginTop、marginLeft。

在处理样式的时候，专业的开发者会使用更多的技巧和注意事项去确保交互和性能的最优化，这包括但不限于处理样式的缓存、避免不必要的重排重绘、使用专用的CSS类处理样式变化等。

五、性能考量和最佳实践

避免频繁修改样式

频繁查询和修改DOM元素的样式会导致浏览器重绘（repAInt）和回流（reflow），这两者都会影响前端性能。为了性能优化，最佳实践是尽量减少直接对样式的操作，利用CSS类进行样式变化。

使用类和批量操作

当需要对元素的多个样式进行修改时，应该考虑定义一个CSS类，然后通过JavaScript添加或移除这个类来实现样式的变更。

六、结合框架使用

在现代框架中获取样式

在使用如React、Vue等现代JavaScript框架时，获取和操作元素的样式通常更加简单且高效。每个框架都有自己的最佳实践去处理样式问题，开发者应该根据框架提供的接口和推荐方式去获取和修改元素的样式。

总结而言，获取元素的样式是前端开发中的基本需求，了解不同的方法及其适用场景及其重要。正确使用上述方法不仅能确保跨浏览器的兼容性，还能提升前端页面的性能。

相关问答FAQs：

Q: 需要使用哪些 JavaScript 方法来获取元素的样式？

A:

• 使用document.getElementById方法来获取元素对象 – 可以通过该方法获取具有指定id的元素。
• 使用ele.style属性来获取内联样式 – 通过访问元素对象的style属性，可以获取元素的内联样式，也可以修改它。
• 使用window.getComputedStyle方法来获取计算后的样式 – 该方法返回一个包含元素计算后样式的对象，可以访问元素的各个样式属性。
• 使用ele.className属性来获取类样式 – 可以通过访问元素对象的className属性，获取元素的类样式名称。
• 使用ele.classList属性来获取类样式列表 – classList属性返回一个包含元素类样式的 DOMTokenList 对象，可以通过这个对象的方法来操作类样式。

Q: 如何使用 JavaScript 获取元素的宽度和高度？

A:

• 使用ele.offsetWidth和ele.offsetHeight来获取元素的宽度和高度 – 这两个属性返回一个元素的宽度和高度，包括元素的边框、内边距和滚动条。
• 使用ele.clientWidth和ele.clientHeight来获取元素的内容区域的宽度和高度 – 这两个属性返回一个元素内容区域的宽度和高度，不包括边框和滚动条。
• 使用ele.getBoundingClientRect()方法来获取元素相对于视口的位置和尺寸 – 该方法返回一个包含元素位置和尺寸信息的 DOMRect 对象，可以通过访问对象的属性来获取相关信息。

Q: 如何使用 JavaScript 判断元素是否可见？

A:

• 使用ele.style.display属性判断元素的显示状态 – 如果ele.style.display的值为none，则该元素是隐藏的；否则，元素是可见的。
• 使用ele.style.visibility属性判断元素的可见状态 – 如果ele.style.visibility的值为hidden，则该元素是隐藏的；否则，元素是可见的。
• 使用window.getComputedStyle方法判断元素的可见状态 – 通过获取计算后的样式对象，可以判断元素的可见状态。
• 使用ele.getBoundingClientRect()方法判断元素在视口内是否可见 – 通过获取元素相对于视口的位置信息，可以判断元素是否在视口内可见。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。