如何在 JavaScript 中获取 CSS 属性的当前值?
cssjavascriptweb developmentfront end technology
getComputedStyle() 方法提供一个对象,其中包含应用于目标元素的所有样式。
示例
以下示例说明了如何使用 JavaScript 获取和设置 CSS 变量。
<!DOCTYPE html> <html> <head> <style> div { margin: 4%; padding: 4%; width: 50%; text-align: center; background-color: powderblue; border-radius: 4%; } </style> </head> <body> <div>Test Div</div> <span></span> <script> let element = document.querySelector('div'); let getStyle = window.getComputedStyle(element); document.querySelector('span').textContent = ('background-color: ' + getStyle.getPropertyValue('background-color') + '.'); </script> </body> </html>
输出
这将产生以下结果 −
示例
<!DOCTYPE html> <html> <head> <style> div { display: flex; margin: 4%; padding: 4%; width: 20vh; height: 20vh; box-shadow: inset 0 0 23px cadetblue; border: 2px groove green; border-radius: 50%; } </style> </head> <body> <div><div></div></div> <span></span> <script> let element = document.querySelector('div'); let getStyle = window.getComputedStyle(element); document.querySelector('span').textContent = ('box-shadow: ' + getStyle.getPropertyValue('box-shadow') + '.'); </script> </body> </html>
输出
这将产生以下结果 −