JavaScript操作CSS的常见例子

有人给我介绍对象吗

已于 2023-12-01 10:50:32 修改

阅读量374

点赞数 10

分类专栏： # JS 文章标签： javascript css 开发语言

于 2023-12-01 10:49:59 首次发布

本文链接：https://blog.csdn.net/weixin_50993868/article/details/134728421

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

以下是一些使用JavaScript操作CSS的常见例子：

修改元素的样式属性：

// 获取元素节点
const myElement = document.getElementById('myElement');

// 修改元素的样式属性
myElement.style.color = 'red';
myElement.style.fontSize = '20px';
myElement.style.backgroundColor = 'blue';

添加和移除CSS类：

// 获取元素节点
const myElement = document.getElementById('myElement');

// 添加CSS类
myElement.classList.add('highlight');

// 移除CSS类
myElement.classList.remove('highlight');

切换CSS类状态：

// 获取元素节点
const myElement = document.getElementById('myElement');

// 切换CSS类状态
myElement.classList.toggle('highlight');

获取计算后的样式属性值：

// 获取元素节点
const myElement = document.getElementById('myElement');

// 获取计算后的样式属性值
const computedColor = getComputedStyle(myElement).color;
const computedFontSize = getComputedStyle(myElement).fontSize;

操作CSS动画：

// 获取元素节点
const myElement = document.getElementById('myElement');

// 添加CSS动画类
myElement.classList.add('animate');

// 监听动画结束事件
myElement.addEventListener('animationend', function(event) {
  // 动画结束后的处理
  console.log('Animation ended!');
});

动态插入CSS样式：

// 创建一个<style>元素节点
const styleElement = document.createElement('style');

// 设置样式内容
styleElement.textContent = `
  .highlight {
    background-color: yellow;
  }
`;

// 将<style>元素节点插入到<head>元素中
document.head.appendChild(styleElement);

这些例子展示了如何使用JavaScript操作CSS。可以使用style属性来修改元素的样式属性，使用classList属性来添加、移除和切换CSS类，使用getComputedStyle()方法获取计算后的样式属性值，使用addEventListener()方法监听动画事件，还可以动态地插入CSS样式。

通过这些操作，可以实现对元素样式的动态修改和操控，以及对CSS类的添加、移除和切换，从而实现各种样式效果的交互和动态变化。

有人给我介绍对象吗

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作CSS的常见例子

通过这些操作，可以实现对元素样式的动态修改和操控，以及对CSS类的添加、移除和切换，从而实现各种样式效果的交互和动态变化。这些例子展示了如何使用JavaScript操作CSS。方法监听动画事件，还可以动态地插入CSS样式。属性来添加、移除和切换CSS类，使用。方法获取计算后的样式属性值，使用。属性来修改元素的样式属性，使用。
复制链接

扫一扫