js 实现 内联
内联样式的基本实现
在JavaScript中动态添加内联样式可以通过直接操作DOM元素的style属性实现。每个CSS属性需转换为驼峰命名法（如background-color变为backgroundColor）。
const element = document.getElementById('target');
element.style.color = 'red';
element.style.fontSize = '16px';批量设置内联样式
通过Object.assign()或遍历对象属性可一次性设置多个样式，避免重复代码。
const styles = {
backgroundColor: 'blue',
padding: '10px',
border: '1px solid black'
};
Object.assign(element.style, styles);动态样式计算
结合变量或函数计算样式值，实现响应式效果。例如根据窗口大小调整元素尺寸：
window.addEventListener('resize', () => {
element.style.width = `${window.innerWidth * 0.8}px`;
});样式优先级处理
内联样式具有最高优先级。若需覆盖内联样式，可通过!important或更具体的CSS选择器，但通常建议直接修改JavaScript中的样式对象。
element.style.setProperty('font-weight', 'bold', 'important');移除内联样式
将样式属性设为空字符串可移除特定内联样式，恢复外部CSS定义的效果。
element.style.color = ''; // 移除color内联样式性能优化建议
频繁操作内联样式可能触发重排（reflow）。对批量修改建议：
- 使用
classList切换预定义类 - 通过
requestAnimationFrame合并样式变更 - 使用CSS变量（Custom Properties）通过JavaScript控制
// 通过CSS变量控制
document.documentElement.style.setProperty('--theme-color', '#ff0000');框架中的内联样式实现
现代前端框架通常提供更优雅的内联样式方案：
- React: 直接传递样式对象
<div style={{ color: 'red', fontSize: 14 }} /> - Vue: 通过
:style绑定<div :style="{ 'font-weight': isBold ? 'bold' : 'normal' }" />
