如何正确使用 JavaScript 修改元素的 CSS 样式值-html教程-PHP中文网

如何正确使用 JavaScript 修改元素的 CSS 样式值

getComputedStyle() 返回的是只读的计算样式，无法通过 setProperty() 修改；应直接操作元素的 style 属性（内联样式）来动态设置 CSS 值。

`getcomputedstyle()` 返回的是只读的计算样式，无法通过 `setproperty()` 修改；应直接操作元素的 `style` 属性（内联样式）来动态设置 css 值。

在 JavaScript 中，CSSStyleDeclaration.setProperty() 是一个强大且标准化的方法，用于动态设置 CSS 属性值。但它的使用有明确的前提条件：必须作用于可写入的样式声明对象，而非只读的计算样式。

你遇到的错误：

Uncaught DOMException: Failed to execute 'setProperty' on 'CSSStyleDeclaration': 
These styles are computed, and therefore the 'color' property is read-only.

根本原因在于：window.getComputedStyle(element) 返回的是只读的、已计算完成的样式对象（即浏览器综合了外部样式表、内部 <style></style>、内联 style 属性等所有来源后得出的最终值），它不支持任何写操作——包括 setProperty()、removeProperty() 或直接赋值（如 cssDecl.color = 'red'）。

✅ 正确做法：操作元素自身的 style 属性（即内联样式声明）

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function click1() {
  const para = document.querySelector('h1');

  // ✅ 获取当前计算颜色（只读）
  const computed = window.getComputedStyle(para);
  const currentColor = computed.getPropertyValue('color');
  document.getElementById('a').innerHTML = `Current color: ${currentColor}`;

  // ✅ 修改内联样式（可写）→ 真正生效的动态样式
  para.style.setProperty('color', 'red'); 
  // 或等价写法：para.style.color = 'red';
}

⚠️ 注意事项：

para.style.setProperty() 仅影响内联样式（style attribute），优先级高于外部/内部样式表，因此能覆盖 .h1 { color: ... } 的声明；
若需移除某样式并回退到 CSS 规则控制，可用 para.style.removeProperty('color')；
para.style 对象初始为空（CSSStyleDeclaration），但它是可写的，所有通过它设置的属性都会实时渲染；
不要混用 getComputedStyle(para).setProperty(...) —— 这是无效且会抛错的操作。