JavaScript和CSS都是前端开发中最常用的两种语言之一。两者之间的结合可以实现更加优秀的页面交互体验。在本篇文章中，我们将重点介绍如何在JavaScript中加入CSS样式。

JavaScript通过document对象来选择页面元素，同样可以通过样式来改变元素的外观。比如，我们可以使用JavaScript来改变一个元素的背景颜色：

var elem = document.getElementById("myElement");elem.style.backgroundColor = "red";

在这个例子中，我们首先使用document对象和getElementById方法来选择元素，然后将该元素的背景色改变为红色。

但是，上面这种方式并不是最佳的做法。我们更倾向于将CSS样式写在样式表中，并在JavaScript中引用。这种方式更加方便，因为我们可以在样式表中定义多个样式，并通过JavaScript动态地将它们应用到各个元素上。

下面是一个例子，展示如何通过JavaScript来应用CSS类：

var elem = document.getElementById("myElement");elem.classList.add("myClass");

在这个例子中，我们首先选择一个元素，并使用classList.add()方法为其添加CSS类。接着，在CSS样式表中，我们定义了一个名为“myClass”的类：

.myClass {background-color: red;color: white;}

通过这种方法，我们可以将样式分离出来，提供更加可维护的代码，并且可以在JavaScript中动态地改变样式。

除了classList，我们还可以使用className属性来改变元素的类。例如：

var elem = document.getElementById("myElement");elem.className = "myClass";

这个例子中，我们将一个元素的className属性设置为“myClass”，从而改变其外观。

除了类，我们还可以通过设置元素的style属性来直接应用CSS样式。例如：

var elem = document.getElementById("myElement");elem.style.backgroundColor = "red";elem.style.color = "white";

在这个例子中，我们设置了一个元素的背景色和文本颜色。然而，这种方式只适合于非常简单的样式，如果需要应用多个属性，我们更推荐使用类的方式。

总之，JavaScript和CSS的结合可以为我们带来更加优秀的页面交互体验。在JavaScript中加入CSS样式的方式各有利弊，但是我们更倾向于使用CSS类，以提高代码的可维护性和可读性。