css零到一高级教程024：CSS 使用 JavaScript 更改变量

最新推荐文章于 2024-06-05 14:53:46 发布

慕容屠苏

最新推荐文章于 2024-06-05 14:53:46 发布

阅读量1k

点赞数

分类专栏： css零到一文章标签： css html 前端

本文链接：https://blog.csdn.net/kerryqpw/article/details/123846773

版权

css零到一专栏收录该内容

98 篇文章 2 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用JavaScript更改变量，通过示例展示了在CSS中利用JavaScript改变--blue变量的值，同时提及了浏览器的支持情况和CSS var()函数的应用。

摘要由CSDN通过智能技术生成

使用 JavaScript 更改变量

CSS 变量可以访问 DOM，这意味着您可以通过 JavaScript 更改它们。

这个例子说明了如何创建脚本来显示并更改上一页中使用的示例中的 --blue 变量。此刻，如果您不熟悉 JavaScript，不要担心。您可以在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识：

实例

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

.container button  {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>

<script>
// 获取根元素
var r = document.querySelector(':root');

// 创建获取变量值的函

了解本专栏