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' }" />