JavaScript操作CSS常见例子

2024-8-18

一些使用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类的添加、移除和切换，从而实现各种样式效果的交互和动态变化。

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

THE END