**一、使用内联样式**
最直接的方式是在通过 DOM 操作给 HTML 元素设置 `style` 属性来改变其样式：
javascript
// 获取指定的DOM元素
var element = document.getElementById('myElement');
// 动态设定该元素的颜色与字体大小属性
element.style.color = 'red';
element.style.fontSize = '18px';
// 或者一次性定义多个样式（注意这里采用驼峰命名法）
element.setAttribute("style", "color:red; fontSize: 20px;");
**二、创建并应用新的CSS规则**
对于需要批量或者全局更改样式的场景，可以通过构造一个新的 CSSRule 对象并将它插入到对应的 StyleSheet 规则集中：
javascript
// 创建一个新css rule对象
let newStyleDeclaration = document.createElement('style');
newStyleDeclaration.innerHTML =
`.dynamicClass { color: blue; font-size: 3em}`;
// 将新建的 style 插入 head 部分以使其生效
document.head.appendChild(newStyleDeclaration);
// 现在可以将这个类应用于任何HTML元素进行样式变更了。
document.querySelector('#anotherElement').classList.add('dynamicClass');
**三、利用 className 添加/切换 class 类名**
我们还可以通过对元素的className进行增删改查的方式来控制外部CSS文件中的class样式对当前元素的影响:
javascript
// 假设有一个已存在的 .highlighted 的 css 类别用于高亮显示文本
const myDiv = document.getElementById('contentArea');
// 给目标元素增加 highlighted 这个类别从而启用相关样式
myDiv.classList.add('highlighted');
// 在某个条件满足时移除此样式
if (/* some condition */) {
myDiv.classList.remove('highlighted');
}
// 判断是否拥有特定类
if(myDiv.classList.contains('highlighted')) {...}
// 使用toggle方法可以根据已有状态切换类别的存在与否
myDiv.classList.toggle('activeOnHover');
以上三种方式涵盖了从简单快速局部调整到复杂全局风格变换的各种应用场景，在实际项目开发过程中可根据具体需求选择合适的方法来实现在JavaScript中动态添加及管理CSS样式的目标。值得注意的是，尽管可以直接操纵inline样式方便快捷，但为了保持良好的可维护性和分离关注点原则，推荐优先考虑基于ClassName以及自定义CSS Rule这两种更为结构化和模块化的方案来进行样式操控。