在JavaScript（简称JS）中写CSS主要是通过操作DOM（文档对象模型）来实现。以下将详细介绍几种在JS中操作CSS的方法。
1. 行内样式
最直接的方式是使用DOM元素的`style`属性来修改样式。这种方式只会影响单个元素。
// 获取元素
var element = document.getElementById("myElement");
// 设置样式
element.style.color = "red";
element.style.fontSize = "20px";
这种方法适用于快速改变样式或对动态创建的元素应用样式。但缺点是它不能跨多个元素应用样式，且容易导致代码臃肿。
2. 类名操作
通过修改DOM元素的`className`或`classList`属性，可以批量应用样式。
// 添加类名
element.className += " newClass";
// 使用classList.add方法（现代浏览器支持）
element.classList.add("newClass");
然后在CSS文件中预先定义好这些类。
.newClass {
color: red;
font-size: 20px;
}
这种方法可以复用样式，并保持HTML和JS的分离。
3. CSSOM（CSS对象模型）
JavaScript还可以通过CSSOM API操作样式表。你可以通过`document.styleSheets`访问样式表。
// 添加新的样式规则
document.styleSheets[0].insertRule(".newClass { color: red; }", 0);
// 修改现有规则
document.styleSheets[0].rules[0].style.color = "blue";
这种方法相对复杂，但适合动态生成样式表。
4. 使用CSS-in-JS库
CSS-in-JS是一种在JavaScript中编写CSS的库或模式。这些库允许你在JavaScript中定义样式，并能够利用JavaScript的所有功能，例如条件语句、循环等。
// 使用styled-components库的例子
import styled from 'styled-components';
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
这种方法适用于大型项目，可以更好地管理和复用样式。
性能考虑
- 尽量减少DOM操作，因为它们可能导致重排（reflow）和重绘（repaint）。
- 使用类名进行样式修改通常比直接操作行内样式性能更好。
- 避免过多地使用CSSOM，因为它可能会影响性能。
综上所述，在JavaScript中写CSS有多种方法，每种方法都有其适用场景。选择合适的方法，可以在保持代码清晰、易于维护的同时，实现高效的样式管理。