css实现js样式
使用CSS变量动态控制样式
CSS变量（自定义属性）可以结合JavaScript动态修改样式，无需直接操作DOM元素的style属性。
:root {
--primary-color: #3498db;
--font-size: 16px;
}
.button {
background-color: var(--primary-color);
font-size: var(--font-size);
}通过JavaScript修改变量值：
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
document.documentElement.style.setProperty('--font-size', '20px');通过类名切换样式
定义不同的CSS类，通过JavaScript切换元素的类名实现样式变化。
.active {
background-color: #2ecc71;
transform: scale(1.1);
}
.hidden {
display: none;
}JavaScript操作类名：
const element = document.querySelector('.box');
element.classList.add('active');
element.classList.remove('hidden');使用style属性直接注入CSS
通过JavaScript直接修改元素的style属性，适用于局部样式调整。
const element = document.querySelector('.header');
element.style.backgroundColor = '#9b59b6';
element.style.padding = '20px';动态加载CSS文件
通过JavaScript动态插入<link>或<style>标签，实现样式表的加载或覆盖。
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'dynamic-styles.css';
document.head.appendChild(link);使用@media查询响应式逻辑
CSS媒体查询可以替代部分JavaScript的响应式逻辑，如根据视口宽度调整布局。
@media (max-width: 768px) {
.menu {
flex-direction: column;
}
}伪类和属性选择器模拟交互
利用CSS伪类（如:hover、:active）或属性选择器模拟JavaScript的交互效果。
.button:hover {
opacity: 0.8;
}
input[type="checkbox"]:checked + label {
color: #27ae60;
}使用calc()实现动态计算
CSS的calc()函数可以结合变量实现动态尺寸计算，减少JavaScript的介入。
.container {
width: calc(100% - var(--sidebar-width));
}通过上述方法，CSS可以替代部分JavaScript的样式操作，提升性能并简化代码逻辑。
