超实用！JavaScript修改CSS变量,达到动态修改样式的目的

Posted wakangda

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了超实用！JavaScript修改CSS变量,达到动态修改样式的目的相关的知识，希望对你有一定的参考价值。

在网页开发中，我们通常使用CSS来设置网页的样式。但是，在开发过程中，有时候我们需要根据不同的条件来动态修改样式，这时候就需要使用javascript来实现。

在CSS中，有一种变量的概念，可以使用变量来定义颜色、字体大小等样式属性。在本篇文章中，我们将介绍如何使用JavaScript来修改CSS变量，从而动态地修改样式。

案例演示：

我们假设有一个按钮，当点击按钮时，将改变页面中所有段落的背景颜色。首先，我们需要在CSS中定义一个变量，用来表示背景颜色。在本例中，我们将变量名定义为–bg-color。

	:root 
	  --bg-color: #ffffff;
	
	
	p 
	  background-color: var(--bg-color);

在上面的代码中，我们使用:root来定义全局的CSS变量–bg-color，并将其设置为白色。然后，我们将所有段落的背景颜色设置为–bg-color变量。

接下来，我们将使用JavaScript来动态修改–bg-color变量的值。我们将添加一个点击事件监听器，当按钮被点击时，将随机生成一个颜色值，并将其设置为–bg-color的值。

const button = document.querySelector('button');
button.addEventListener('click', () => 
  document.documentElement.style.setProperty('--bg-color', 'red');
);

在上面的代码中，我们已经成功地通过JavaScript动态地修改了CSS变量，实现了动态修改样式的效果。当我们点击按钮时，页面中所有段落的背景颜色都会变成红色。

总结

JavaScript修改CSS变量可以实现动态修改样式的效果，非常适合在需要动态改变样式的场景中使用。例如，当用户在网站上进行某些操作时，需要根据不同的条件来动态改变页面的样式，这时候就可以使用JavaScript修改CSS变量。

除此之外，CSS变量还可以帮助我们更好地组织和管理代码。通过使用变量，我们可以避免在多个样式属性中重复定义相同的值，从而使代码更加易读和易于维护。

然而，需要注意的是，CSS变量并不是所有浏览器都支持。在一些较老的浏览器中，可能无法正确解析和使用CSS变量。因此，在使用CSS变量时，需要进行兼容性测试，并根据实际情况进行使用和调整。

此外，CSS变量的作用域也需要注意。CSS变量定义的作用域只在定义该变量的元素及其后代元素中有效。如果需要在整个页面中使用该变量，可以将其定义在:root中。

7.1 万 Star！超实用，60 多种动画效果的 CSS 库

【导语】：animate.css 是一个有趣的，跨浏览器的CSS3 动画库。

简介

animate.css 是一个有趣的，跨浏览器的 css3 动画库，兼容性好，使用方便。它预设了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

animate.css 基于 CSS3，只兼容支持 CSS3 animate 属性的浏览器，IE10+、Firefox、Chrome、Opera、Safari。

项目地址是：

https://github.com/animate-cs...

安装

  • 使用 npm 安装：
$ npm install animate.css --save
  • 使用 yarn 安装：
$ yarn add animate.css
  • 使用 CDN 直接引入：
<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

简单使用

  • 基本用法。安装 animate.css 后，将以下属性添加到中即可完成动画效果的创建。
<h1 class="animate__animated animate__bounce">An animated element</h1>
  • 自定义属性。使用自定义属性来定义动画持续时间、延迟，这使得它非常灵活，当需要更改动画持续时间的时间，只需要为全局或本地设置一个新值。
/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}
  • 同时自定义属性还可以动态更改所有时间受限的属性，可以通过 JS 脚本动态修改。
// All animations will take twice the time to accomplish
document.documentElement.style.setProperty(\'--animate-duration\', \'2s\');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty(\'--animate-duration\', \'.5s\');
  • 延迟效果：可以直接在元素的 class 属性上添加延迟效果：
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

// animate.css 提供了这些延迟属性：
class               默认延迟时间
animate__delay-2s   2s
animate__delay-3s   3s
animate__delay-4s   4s
animate__delay-5s   5s

// 也可以通过 --animate-delay 属性进行自定义：
/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}
  • 动画速度：可以通过添加这些 class 来控制动画的速度：
<div class="animate__animated animate__bounce animate__faster">Example</div>

// 速度的 class 包括这些：
class            默认速度
animate__slow    2s
animate__slower  3s
animate__fast    800ms
animate__faster  500ms

// 可以通过 --animate-duration 全局或本地属性自定义动画时间：

/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;
}

/* Only this element will take half the time to finish */
.my-element {
  --animate-duration: 0.5s;
}
  • 循环效果：可以通过添加这些 class 来控制动画的循环次数：
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

// 可供选择的 class 有：
class              循环次数
animate__repeat-1  1
animate__repeat-2  2
animate__repeat-3  3
animate__infinite  无限循环

// 类似的，也可以自定义循环次数：
/* The element will repeat the animation 2x
   It\'s better to set this property locally and not globally or
   you might end up with a messy situation */
.my-element {
  --animate-repeat: 2;
}
  • 最后，来看看 animate.css 的一些效果：

视频请移步：https://mp.weixin.qq.com/s/X1...

开源前哨 日常分享热门、有趣和实用的开源项目。参与维护 10万+ Star 的开源技术资源库，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。

以上是关于超实用！JavaScript修改CSS变量,达到动态修改样式的目的的主要内容，如果未能解决你的问题，请参考以下文章

全新出炉，15个超有趣的 JavaScript 和 CSS 库

超实用的JavaScript代码段 Item4 --发送短信验证码

vue 修改 className 的样式内容（解决el-scrollbar 问题）

vue 修改 className 的样式内容（解决el-scrollbar 问题）

vue 修改 className 的样式内容（解决el-scrollbar 问题）

Vue.js超实用干货教程免费领