用CSS实现，优雅省事 — JavaScript的十种用法

2023-09-22 13:31:11

正文

在上一篇文章 “能用CSS实现的就不用麻烦JavaScript” 中，我们讨论了使用CSS代替JavaScript的几种常用场景。在这篇文章中，笔者将分享更多这样的场景，希望大家能在日常开发中使用到。

场景1：切换元素的可见性

通常情况下，我们需要使用JavaScript来切换元素的可见性。但是，我们也可以使用CSS来实现同样的效果。例如，我们可以使用display属性来控制元素的可见性。如果我们将display属性设置为none，那么元素将被隐藏。如果我们将display属性设置为block，那么元素将被显示。

场景2：动画效果

动画效果是网页设计中非常常见的一个元素。通常情况下，我们需要使用JavaScript来创建动画效果。但是，我们也可以使用CSS来实现同样的效果。例如，我们可以使用animation属性来创建动画效果。animation属性可以指定动画的持续时间、动画的类型、动画的次数等等。

场景3：表单验证

表单验证是网页开发中非常重要的一环。通常情况下，我们需要使用JavaScript来进行表单验证。但是，我们也可以使用CSS来实现同样的效果。例如，我们可以使用required属性来指定表单元素是否必须填写。如果表单元素是必须填写的，那么浏览器会自动进行验证。

场景4：拖放功能

拖放功能是网页设计中非常常见的一个元素。通常情况下，我们需要使用JavaScript来实现拖放功能。但是，我们也可以使用CSS来实现同样的效果。例如，我们可以使用draggable属性来指定元素是否可以拖动。如果元素可以拖动，那么浏览器会自动启用拖放功能。

场景5：响应式布局

响应式布局是网页设计中非常重要的一环。通常情况下，我们需要使用JavaScript来实现响应式布局。但是，我们也可以使用CSS来实现同样的效果。例如，我们可以使用media queries来创建响应式布局。media queries可以指定在不同的屏幕尺寸下，元素的样式应该如何变化。

场景6：平滑滚动

平滑滚动是网页设计中非常常见的一个元素。通常情况下，我们需要使用JavaScript来实现平滑滚动。但是，我们也可以使用CSS来实现同样的效果。例如，我们可以使用scroll-behavior属性来控制页面的滚动行为。scroll-behavior属性可以指定滚动是否平滑，以及滚动速度如何。