javascript怎么动态设置css

本篇内容介绍了“javascript怎么动态设置css”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

JavaScript 动态设置 CSS 样式的基础知识

在了解 JavaScript 动态设置 CSS 样式的具体方法之前，首先要理解一些基础知识。CSS 样式通常都是在HTML中的样式表中定义的，包括像颜色、字体等属性。如果要动态改变某个元素的样式，可以使用JavaScript来修改该元素的CSS属性。

要设置CSS属性，首先需要选取要修改的元素。在JavaScript中，选取元素有几种不同的方法，其中最常用的就是使用 ID 或类名选取元素。如果要通过ID选取元素，可以使用以下代码：

var elem = document.getElementById("my-elem");

如果要通过类名选取元素，可以使用以下代码：

var elems = document.querySelectorAll(".my-elems");

设置元素的CSS属性可以使用 DOM 中的属性，例如：

elem.style.backgroundColor = "red";

上面的代码将元素的背景颜色修改为红色。可以设置多个属性，例如：

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

上面的代码将元素的背景颜色修改为红色，并且将字体颜色修改为白色。

JavaScript 动态设置 CSS 样式的实际应用

现在我们已经了解了 JavaScript 动态设置 CSS 样式的基础知识，下面让我们看一些实际应用。

1. 动态更改网页标题

当用户与网页交互时，可能需要根据用户所做的操作来更改页面标题。可以通过 JavaScript 动态更改页面标题，例如：

document.title = "New Page Title";

上面的代码将页面标题更改为“New Page Title”。

2. 鼠标移动时跟随光标

在开发网站时，有时需要在页面中创建可拖动的元素，例如窗口、面板等。可以使用 JavaScript 动态更新这些元素的位置，以便根据鼠标移动更新它们的位置。

以下是一些示例代码，它演示了如何使用 JavaScript 和 CSS 实现将元素跟随鼠标移动：

var elem = document.getElementById("my-elem");
document.addEventListener("mousemove", function(e) {
  var x = e.clientX;
  var y = e.clientY;
  elem.style.left = x + "px";
  elem.style.top = y + "px";
});

上面的代码将一个名为“my-elem”的元素跟随鼠标移动。当鼠标移动时，页面将更新该元素的左和上位置，使其始终保持在鼠标下方。

3. 改变字体大小和颜色

JavaScript 可以用来让用户根据自己的喜好设置网页中的字体大小和颜色。可以使用以下代码：

var elem = document.getElementById("my-elem");
document.getElementById("increase-font-size").onclick = function() {
  var curFontSize = parseInt(window.getComputedStyle(elem, null).getPropertyValue("font-size"));
  elem.style.fontSize = (curFontSize + 1) + "px";
};

document.getElementById("change-color").onclick = function() {
  elem.style.color = "red";
};

上面的代码将元素“my-elem”的字体大小和颜色修改为用户所需要的大小和颜色。