在选择器上使用 js 做一些 css

简介

在开发 web 应用程序时，我们通常使用 css 文件来为页面添加样式。然而，有时候我们会希望在运行时通过 JavaScript 动态改变样式。这种做法可以让我们实时响应用户交互，提高用户体验。下面是一些在选择器上使用 JavaScript 做一些 css 的示例。

示例

修改元素样式

要修改元素样式，可以使用 style 属性。该属性是一个对象，包含了该元素已应用的样式的属性和值。以下代码将修改页面上 id 为 my-element 的元素的背景颜色：

const element = document.getElementById("my-element");
element.style.backgroundColor = "red";

动态添加/删除类

在 css 中，我们可以使用类选择器来为多个元素应用相同的样式。在 JavaScript 中，可以通过添加和删除类来实现这一点。以下代码将在鼠标悬停在 id 为 my-element 的元素上时，为该元素添加名为 hover 的类：

const element = document.getElementById("my-element");
element.addEventListener("mouseover", function() {
  element.classList.add("hover");
});

以下代码将在鼠标离开 id 为 my-element 的元素时，从该元素中删除名为 hover 的类：

const element = document.getElementById("my-element");
element.addEventListener("mouseout", function() {
  element.classList.remove("hover");
});

展示/隐藏元素

有时候，我们会希望在用户与页面交互时展示或隐藏某些元素。以下代码将在单击 id 为 my-button 的按钮时，显示或隐藏 id 为 my-element 的元素：

const button = document.getElementById("my-button");
const element = document.getElementById("my-element");
button.addEventListener("click", function() {
  if (element.style.display === "none") {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
});

动态计算样式

有时候，我们需要根据用户输入或其他因素来计算样式。以下代码将根据 id 为 my-input 元素的值改变 id 为 my-element 元素的宽度：

const input = document.getElementById("my-input");
const element = document.getElementById("my-element");
input.addEventListener("input", function() {
  element.style.width = input.value + "px";
});

结论

在选择器上使用 JavaScript 做一些 css 可以让我们实时响应用户交互，提高用户体验。上述示例只是冰山一角，JavaScript 中有很多其他方法和技巧可以改变元素样式。