js怎么改变css属性

JavaScript (JS) 是一种用于设计交互式网页和动态网站的编程语言。JS可以通过 DOM (文档对象模型) 来访问和操作 HTML 页面中的元素。本文主要介绍如何使用 JS 来改变 CSS 属性。

一、获取元素
在改变 CSS 属性之前，需要先获取到要操作的元素。可以使用 document.getElementById() 方法通过元素 ID 来获取元素，或使用 document.querySelector() 方法通过 CSS 选择器来获取元素。

如下面的例子：
HTML 代码：

<div id="myDiv">Hello World!</div>

JS 代码：

var myDiv = document.getElementById("myDiv");

或

var myDiv = document.querySelector("#myDiv");

这两行代码都会获取包含文本 “Hello World!” 的 div 元素。

二、改变 CSS 属性
有两种方式可以改变 CSS 属性: 通过 style 属性直接更改样式，或通过 class 属性来改变样式。

1. 直接更改样式
   可以使用元素的 style 属性来改变 CSS 样式，如下例子更改背景颜色为红色：

   myDiv.style.backgroundColor = "red";

   登录后复制

   也可以同时更改多个样式：

   myDiv.style.backgroundColor = "red";
   myDiv.style.color = "white";

   登录后复制

2. 通过 class 属性
   通过改变 class 属性可以在 CSS 文件中预先定义好多个样式，然后在 JS 中通过元素的 class 属性来改变样式。如下例子，改变背景颜色为蓝色：
   CSS 代码：

   .blue-background {
     background-color: blue;
   }

   登录后复制

   JS 代码：

   myDiv.className = "blue-background";

   登录后复制

   这样就可以将 div 元素背景颜色改为蓝色。

三、事件触发样式更改
JS 还可以在用户执行某些操作后触发样式更改。如下例子，当鼠标悬浮在元素上时，改变文字颜色为绿色：
HTML 代码：

<div id="myDiv">Hello World!</div>

JS 代码：

var myDiv = document.getElementById("myDiv");

myDiv.onmouseover = function() {
  myDiv.style.color = "green";
};

myDiv.onmouseout = function() {
  myDiv.style.color = "black";
};

当鼠标悬浮在元素上时，文字颜色会变为绿色；当鼠标移开时，文字颜色会恢复为黑色。

总结：
通过使用 JS 可以轻松的修改 HTML 元素的样式，使网站更加动态和有趣。使用上述方法可以在网站设计中灵活地运用 JS 改变样式，使页面更加多样。

以上是js怎么改变css属性的详细内容。更多信息请关注PHP中文网其他相关文章！