[分享]css不通过js控制样式

CSS是用来控制网页样式的语言，而JavaScript则用来控制网页的交互和动态效果。在实际开发中，我们通常会使用JavaScript来控制CSS样式，但是也有一些情况下，我们不需要使用JavaScr...

CSS是用来控制网页样式的语言，而JavaScript则用来控制网页的交互和动态效果。在实际开发中，我们通常会使用JavaScript来控制CSS样式，但是也有一些情况下，我们不需要使用JavaScript来改变CSS样式，这篇文章就来介绍一下这些情况。

在CSS中，我们可以使用伪类、伪元素、属性选择器等一系列选择器来定位到我们想要控制的元素，然后通过CSS属性对该元素进行样式控制。

/* 使用伪类来控制元素的样式 */
a:hover {
  color: red;
}

/* 使用伪元素来插入特殊的样式效果 */
p::before {
  content: "前缀：";
}

/* 使用属性选择器来控制属性值为特定值的元素的样式 */
input[type="text"] {
  border: 1px solid blue;
} 

除了选择器的使用，CSS还有一些其他特性可以帮助我们实现不通过JavaScript控制样式。例如，当你想要设定一个元素的高度和宽度都为窗口高度和宽度时，你可以使用下面的CSS代码实现：

/* 不使用JS，设置元素的高度和宽度为窗口高度和宽度 */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.my-element {
  height: 100vh; /* 视口高度 */
  width: 100vw; /* 视口宽度 */
} 

当然，也有一些情况下我们必须使用JavaScript来改变CSS样式，例如动态控制元素的宽度和高度、实现复杂的动画效果等。但是，在可以不使用JavaScript改变CSS样式的情况下，我们应该尽量避免过度依赖JS来控制CSS样式。