本文深入探讨了如何利用css自定义属性与javascript进行动态样式管理，并重点剖析了在实践中可能遇到的两个关键问题：脚本执行时机不当导致的dom元素和计算样式获取失败，以及javascript直接设置内联样式对css变量动态更新的阻碍。文章提供了具体的解决方案和最佳实践，确保样式能够按预期响应用户交互。
CSS自定义属性与javaScript动态样式管理
CSS自定义属性（Custom Properties），通常被称为CSS变量，为前端开发带来了前所未有的灵活性和动态性。通过它们，我们可以定义可在整个样式表中重复使用的值，并能通过javascript在运行时动态修改，从而实现强大的主题切换、组件状态管理等功能。然而，在结合JavaScript进行动态操作时，开发者可能会遇到一些意想不到的行为，尤其是在涉及到脚本加载时机和css样式优先级时。
挑战：html元素为何停止动态更新？
考虑以下场景：我们定义了一个CSS自定义属性–TAB00_COLOR，并让多个html元素（如#L00, #D01_00, #box_00等）的样式（如背景色、边框色）引用这个变量。
CSS 定义：
:root { --TAB00_COLOR: #FF5555; /* 初始红色 */ } #L00 { background-color : var( --TAB00_COLOR ); } #D01_00 { border-color : var( --TAB00_COLOR ); } #box_00 { background-color : var( --TAB00_COLOR ); } /* 其他元素引用 --TAB00_COLOR */
HTML 结构：
立即学习“Java免费学习笔记（深入）”；
<body> <script src="../../myJavaScriptFile.js"></script> <div class="slider_b"> <input type="range" oninput="slider_00()" ... > <!-- 其他滑块 --> </div> <label id="L00">LABEL00</label> <!-- 其他使用 --TAB00_COLOR 的元素 --> </body>
JavaScript 逻辑：
// 全局变量定义 var r = document.querySelector(':root'); var rs = getComputedStyle(r); function change_the_color( hex_color ){ // 动态修改CSS变量 r.style.setProperty( '--TAB00_COLOR' , hex_color ); } function page_defaults(){ // 初始化L00的背景色 document.getElementById("L00").style.background = rs.getPropertyValue('--TAB00_COLOR'); } // 假设 slider_00() 会调用 change_the_color() // 假设 body onload 会调用 page_defaults()
在这个设置中，当页面加载后，page_defaults() 函数会执行，并将#L00元素的背景色设置为–TAB00_COLOR的当前值。随后，用户通过滑块调用change_the_color()函数，该函数会更新:root上的–TAB00_COLOR变量。我们观察到，除了#L00之外，其他所有引用–TAB00_COLOR的元素都能动态地改变颜色，唯独#L00的背景色保持不变。
理解问题根源
这个现象背后涉及到两个主要原因：
-
脚本执行时机与DOM准备状态： 当 <script src=”../../myJavaScriptFile.js“></script> 标签出现在 <body> 内部且没有 defer 或 async 属性时，浏览器会暂停HTML解析，立即下载并执行脚本。如果脚本中包含了 document.querySelector(‘:root’) 或 getComputedStyle(r) 这样的操作，而此时DOM树尚未完全构建完毕，或者 :root 元素（即 <html> 标签）的计算样式尚未完全就绪，那么 r 和 rs 变量可能无法正确实例化，或者它们捕获到的是一个不完整的状态。虽然在某些浏览器或特定条件下可能看似工作，但这种不确定性是潜在的错误来源。
-
内联样式的高优先级： 这是导致#L00元素无法动态更新的直接原因。在page_defaults()函数中，我们使用了 document.getElementById(“L00″).style.background = rs.getPropertyValue(‘–TAB00_COLOR’); 这行代码。这条语句的作用是直接在#L00元素的HTML标签上添加一个内联样式，例如 <label id=”L00″ style=”background: rgb(255, 85, 85);”>LABEL00</label>。 CSS的优先级规则规定，内联样式具有最高的优先级。一旦一个属性通过内联样式被设置，它就会覆盖任何来自外部样式表、内部样式表或通过CSS变量定义的相同属性。因此，即使–TAB00_COLOR变量在后续通过JavaScript被r.style.setProperty()修改，#L00的background-color属性也仍然被其内联样式牢牢控制，无法响应变量的变化。
解决方案与最佳实践
为了解决上述问题并实现预期的动态样式效果，我们可以采取以下策略：
1. 确保脚本在DOM加载后执行
为了保证 document.querySelector(‘:root’) 和 getComputedStyle 能够正确地获取到DOM元素和其计算样式，最简单且推荐的方法是使用 defer 属性加载外部JavaScript文件。
HTML 修改：
<body> <script src="../../myJavaScriptFile.js" defer></script> <!-- ... 其他内容 ... --> </body>
解释： defer 属性告诉浏览器在后台下载脚本，但只有在HTML文档解析完成后才执行脚本。这确保了当脚本运行时，整个DOM树（包括:root元素）都已经构建完毕，并且其计算样式也已准备就绪。
2. 避免直接设置内联样式来维持CSS变量的动态性
如果一个元素的样式旨在通过CSS变量进行动态控制，那么就应该避免使用JavaScript直接设置该元素的内联样式。
错误示例回顾：
function page_defaults(){ // 这行代码会添加内联样式，破坏动态链接 document.getElementById("L00").style.background = rs.getPropertyValue('--TAB00_COLOR'); }
正确做法： 如果 page_defaults 函数的目标是为 #L00 设置一个初始颜色，并且希望这个颜色后续能够随着 –TAB00_COLOR 的变化而更新，那么 page_defaults 不应该直接设置 #L00 的 background 属性。它应该依赖于CSS本身对 –TAB00_COLOR 的引用。
如果 page_defaults 需要在加载时设置一个 不同于 CSS默认值的初始颜色，并且希望这个颜色仍然由 –TAB00_COLOR 驱动，那么 page_defaults 应该修改 –TAB00_COLOR 本身，而不是 #L00 的内联样式。
优化后的 JavaScript 示例：
// 确保在DOM加载完成后执行 document.addEventListener('DOMContentLoaded', function() { var r = document.querySelector(':root'); // 假设 change_the_color 仍然需要访问 r function change_the_color( hex_color ){ r.style.setProperty( '--TAB00_COLOR' , hex_color ); } // 如果 page_defaults 只是为了确保 L00 初始显示 --TAB00_COLOR 的值 // 并且 CSS 已经写了 background-color: var(--TAB00_COLOR); // 那么 page_defaults 函数可能根本不需要直接操作 L00 的样式。 // 如果需要设置一个特定的初始颜色，可以通过修改CSS变量实现： function page_defaults(){ // 假设初始颜色需要设置为 #FF5555，并且所有依赖 --TAB00_COLOR 的元素都应受影响 change_the_color('#FF5555'); // 或者其他初始颜色 } // 假设 slider_00() 等函数会调用 change_the_color // 例如： window.slider_00 = function() { // 假设这里计算出一个新的 hex_color let newHexColor = '#'+Math.floor(Math.random()*16777215).toString(16); change_the_color(newHexColor); }; // 在页面加载完成时调用 page_defaults page_defaults(); // 确保初始状态设置 });
解释：
- 我们将全局变量的定义和 page_defaults 的调用移入了 DOMContentLoaded 事件监听器中，这与使用 defer 属性的效果类似，都确保了DOM的完全加载。
- page_defaults 现在通过调用 change_the_color 来设置 –TAB00_COLOR 的初始值。由于 change_the_color 修改的是CSS变量，所有引用该变量的元素（包括 #L00）都会动态更新，并且保持其动态响应能力。
3. 优化变量实例化位置（根据原始答案的建议）
原始答案中提到的一种解决方式是将 r 和 rs 的实例化移入 change_the_color 函数内部。这可以确保每次调用 change_the_color 时，r 和 rs 都是最新的。
function change_the_color( hex_color ){ var r = document.querySelector(':root'); // 每次调用时重新获取 var rs = getComputedStyle(r); // 每次调用时重新计算 r.style.setProperty( '--TAB00_COLOR' , hex_color ); } function page_defaults(){ // 如果 page_defaults 仍需获取当前变量值， // 并且 r 和 rs 不再是全局变量， // 则也需要在这里重新获取或通过其他方式传递。 // 但更推荐的方式是让 page_defaults 像上面那样直接设置变量。 // 避免直接操作 element.style.background // 例如： // var r = document.querySelector(':root'); // var rs = getComputedStyle(r); // document.getElementById("L00").style.background = rs.getPropertyValue('--TAB00_COLOR'); // 此行仍应避免，因为它引入内联样式。 }
注意事项： 虽然这种方法可以解决 change_the_color 函数中 r 和 rs 可能因早期脚本执行而未正确实例化的问题，但它引入了每次函数调用都进行DOM查询和样式计算的开销。对于频繁调用的函数，这可能不是最高效的做法。更优的方案通常是确保 r 和 rs 在DOM加载后全局实例化一次，然后重用它们。
总结与关键要点
- 脚本加载时机： 务必确保操作DOM的JavaScript代码在DOM完全加载和解析之后执行。使用 <script defer> 属性或将代码包裹在 DOMContentLoaded 事件监听器中是推荐的做法。
- CSS优先级： 深刻理解CSS的优先级规则，特别是内联样式具有最高优先级。一旦通过 element.style.property 设置了内联样式，它将覆盖所有来自样式表的规则，包括那些使用 var() 函数的规则。
- 动态更新策略： 如果你希望元素能够动态响应CSS自定义属性的变化，请避免直接通过JavaScript设置其内联样式。相反，应该通过 `element.style.setProperty