首先，在html中定义一个样式表。下面是一个简单的例子：
<style> .red { color: red; } .blue { color: blue; }</style><div id="box">hello world!</div><button id="redbtn">变成红色</button><button id="bluebtn">变成蓝色</button>
这个例子中，我们定义了两个css样式类“red”和“blue”，分别设定了文字颜色为红色和蓝色。
然后，在javascript中，我们可以用document.queryselector()方法来获取dom元素，用.style属性来改变css样式。下面是一个例子：
const box = document.queryselector('#box');const redbtn = document.queryselector('#redbtn');const bluebtn = document.queryselector('#bluebtn');redbtn.onclick = () => { box.style.color = 'red';};bluebtn.onclick = () => { box.style.color = 'blue';};
这个例子中，我们创建了三个变量，分别对应html中的<div>元素和两个<button>元素。然后，我们使用.onclick事件来为每个按钮绑定一个函数，在点击按钮时改变<div>元素的颜色。
在这个例子中，我们使用了.style属性来改变css样式。这个属性可以设置元素的任何css属性，例如颜色、背景色、字体、大小等等。我们还可以使用.classlist属性来添加或删除元素的css类，例如：
box.classlist.add('red');box.classlist.remove('blue');
这个例子中，我们将元素的css类从“blue”变为“red”。
总之，javascript可以让我们动态地改变网页的外观和布局，使网页更加丰富和有趣。无论是改变css样式、添加或删除元素、或者交互式动画效果，我们都可以用javascript来实现。如果你是一个网页设计师或者想要学习网页设计，则javascript是必不可少的技能之一。
以上就是探讨如何用javascript来改变css的样式的详细内容。