javascript (js) 是一种用于设计交互式网页和动态网站的编程语言。js可以通过 dom (文档对象模型) 来访问和操作 html 页面中的元素。本文主要介绍如何使用 js 来改变 css 属性。
一、获取元素
在改变 CSS 属性之前，需要先获取到要操作的元素。可以使用 document.getElementById() 方法通过元素 ID 来获取元素，或使用 document.querySelector() 方法通过 CSS 选择器来获取元素。
如下面的例子：
HTML 代码：
Hello World!
JS 代码：
var myDiv = document.getElementById("myDiv");或
立即学习“前端免费学习笔记（深入）”；
var myDiv = document.querySelector("#myDiv");这两行代码都会获取包含文本 “Hello World!” 的 div 元素。
二、改变 CSS 属性
有两种方式可以改变 CSS 属性: 通过 style 属性直接更改样式，或通过 class 属性来改变样式。
-
直接更改样式
可以使用元素的 style 属性来改变 CSS 样式，如下例子更改背景颜色为红色：myDiv.style.backgroundColor = "red";
也可以同时更改多个样式：
myDiv.style.backgroundColor = "red"; myDiv.style.color = "white";
-
通过 class 属性
通过改变 class 属性可以在 CSS 文件中预先定义好多个样式，然后在 JS 中通过元素的 class 属性来改变样式。如下例子，改变背景颜色为蓝色：
CSS 代码：.blue-background { background-color: blue; }JS 代码：
myDiv.className = "blue-background";
这样就可以将 div 元素背景颜色改为蓝色。
三、事件触发样式更改
JS 还可以在用户执行某些操作后触发样式更改。如下例子，当鼠标悬浮在元素上时，改变文字颜色为绿色：
HTML 代码：
Hello World!
JS 代码：
var myDiv = document.getElementById("myDiv");
myDiv.onmouseover = function() {
myDiv.style.color = "green";
};
myDiv.onmouseout = function() {
myDiv.style.color = "black";
};当鼠标悬浮在元素上时，文字颜色会变为绿色；当鼠标移开时，文字颜色会恢复为黑色。
总结：
通过使用 JS 可以轻松的修改 HTML 元素的样式，使网站更加动态和有趣。使用上述方法可以在网站设计中灵活地运用 JS 改变样式，使页面更加多样。
