随着 web 技术的发展，网页越来越复杂，我们希望页面上的元素能够动态变化，以满足用户的不同需求。其中，动态改变 css 是一种常见的技术手段，可以实现页面的动态效果，本文将介绍如何使用 javascript 来动态改变 css。
一、css 介绍
css（cascading style sheets）是一种用于描述网页样式的语言，它可以让我们对 html 元素的样式进行精细控制。比如，可以设置元素的背景颜色、字体、高度、宽度等。
css 样式可以通过以下两种方式进行定义：
1.内部样式表：通过在 html 文档的 head 中使用 <style> 标签来定义。
2.外部样式表：通过在 html 文档中链接一个指向 css 文件的 <link> 标签来定义。
css 样式规则由选择器和声明组成，如下所示：
选择器 { 声明1; 声明2; 声明3; ...}
其中，选择器用于定位页面上的元素，声明则用于设置元素的样式。例如，下面代码将设置所有 p 元素的字体颜色为红色：
p { color: red;}
二、javascript 改变 css
通过 javascript，我们可以在页面加载后动态改变 css 样式，以实现一些比较有趣的效果。例如，在页面滚动到一定位置时让导航栏变为固定位置。下面是一个例子：
window.addeventlistener('scroll', function() { var nav = document.queryselector('nav'); if (window.pageyoffset > 100) { nav.style.position = 'fixed'; nav.style.top = '0'; } else { nav.style.position = 'relative'; nav.style.top = ''; }});
这段代码实现了当文档滚动位置超过 100 像素时，导航栏的样式改变。具体来说，它会将导航栏的 position 属性设为 fixed，让它固定在屏幕顶部，并将 top 属性设为 0，让它与网页顶部保持距离为 0。当文档滚动位置小于 100 像素时，导航栏的 position 属性会被设为 relative，恢复到默认状态。
当然，这只是一个简单的例子。实际应用中，我们可以结合其他 javascript api 和 css3 样式来实现更加复杂的效果。
三、javascript 操作 css 属性
在 javascript 中，我们可以通过 style 属性来获取和设置元素的 css 样式。例如，下面代码将设置元素的背景颜色和字体大小：
var elem = document.queryselector('#foo');elem.style.backgroundcolor = 'red';elem.style.fontsize = '16px';
这里，我们首先通过 document.queryselector() 方法获取 id 为 foo 的元素，随后使用 elem.style 对象来设置样式。
如果要获取元素的样式，则可以使用 getcomputedstyle() 方法。例如，下面代码将获取元素的字体大小：
var elem = document.queryselector('#foo');var style = window.getcomputedstyle(elem);var fontsize = style.getpropertyvalue('font-size');
在这里，我们首先获取 id 为 foo 的元素，然后使用 window.getcomputedstyle() 方法获取元素的样式。注意，这里的样式是计算得出的样式，也就是元素最终呈现的样式。最后，我们使用 getpropertyvalue() 方法获取计算出来的字体大小。
总之，javascript 可以非常方便地操作 css 样式，开发者可以利用 javascript 来实现更加灵活多变的样式效果。
以上就是怎么动态改变css的详细内容。