如果你能用CSS做到，就别用JavaScript
时间：2023-04-02 18:16:55
HTML
前言任何可以用JavaScript编写的应用程序最终都将用JavaScript编写。——阿特伍德定律虽然万物皆可JavaScript，但在一定程度上，css会比JavaScript运行效率更高，所以笔者认为，如果会用CSS，就不必为JavaScript费心了。两种语言都有不同的用途。随着跨浏览器版本的功能和属性的添加，CSS正在成为一种强大的语言，能够完成我们过去依赖JavaScript的事情。平滑滚动曾经有一段时间，我们不得不依赖JavaScript的window.scrollY实现来做到这一点，如果我们想要平滑滚动，还需要一个计时器来添加动画。通过添加scroll-behavior属性，我们可以用一行CSS代码处理我们网站上的平滑滚动！浏览器支持度75%左右，兼容性还不错。html{scroll-behavior:smooth;}完整代码滚动截取幻灯片、图片库等也是经常使用的前端功能。上一代的CSS能力有限，所以我们不得不依赖JavaScript来完成这个功能。现在只需几行代码即可实现此功能。它的工作方式与Flexbox或CSSGrid类似，因为您需要一个设置了scrolln-snap-type的容器元素和多个设置了scroll-snap-align的子元素，如下所示：.parent{滚动捕捉类型：xmandatory;}.child{scroll-snap-align:start;}完整代码CSS动画曾经有一段时间，大多数开发人员使用JavaScript（或jQuery）来为浏览器中的元素设置动画。让这个消失，让那个扩展，这很容易。随着交互式项目变得越来越复杂和移动设备激增，性能变得越来越重要。Flash被抛弃，才华横溢的动画开发人员使用HTML5实现了以前从未实现过的效果。他们需要更好的工具来开发复杂的动画序列并获得最佳性能。JavaScript（或jQuery）做不到。随着浏览器的成熟，也开始提供一些解决方案。最广泛接受的解决方案是使用CSS动画。完整代码表单验证html5丰富了表单元素，提供了required、email、tel等表单元素属性。同样，我们可以使用:valid和:invalid来检查HTML5表单属性。:required伪类指定一个具有required属性的表单元素：valid伪类指定一个正确匹配的必需表单元素：invalid伪类指定一个不符合指定要求的表单元素使用CSScontent属性attr来抓取数据。想到了之后的伪元素，但是如何获取文本，又不会用javascript。CSS的伪元素是一个很强大的东西，我们可以用它来做很多的应用，通常为了做一些效果，content:""大多会留空，其实可以在里面写attr它来抓取数据！hover
div{width:100px;border:1pxsolidred;position:relative;}div:hover:after{content:attr(data-msg);position:absolute;font-size:12px;width:200%;line-height:30px;text-align:center;left:0;top:25px;border:1pxsolidgreen;}当鼠标悬停时，鼠标悬停的场景很常见，比如导航菜单：一般需要使用隐藏的东西比如菜单作为子元素或者悬停目标的相邻元素，以便于使用css控件。例如，上面的菜单是一个相邻的导航菜单。元素：
user菜单在正常状态下隐藏：.menu{display:none;}导航悬停时显示：/*使用相邻的选择器和悬停*/.user:hover+.menu{display:list-item;}注意这里使用了相邻的选择器，这也是为什么要像上面说的那样写成相邻的元素。菜单的位置可以用absolute定位。同时悬停时也要显示菜单本身，否则鼠标离开导航时菜单会消失：.menu:hover{display:list-item;}这里会有一个小问题，就是，menu和navigation需要并排在一起，否则如果中间有空隙的话，上面添加的menuhover是不行的，但实际上，从审美的角度来说，两者之间是有距离的二。这个其实很好解决，只要在菜单上画一个透明区域，蓝框如下：可以使用before/after伪类实现绝对定位：ul.menu:before{content:"";位置：绝对；左：0；顶部：-20px；宽度：100%；高度：20px；/*background-color:rgba(0,0,0,0.2);*/}如果我既写csshover，又监听鼠标事件，用鼠标控制显示和隐藏。双重效应会发生什么？如果按照正常套路，在鼠标事件中悬停时，添加display:block样式，会覆盖CSS设置。也就是说，只要hover一次，css代码就不起作用了，因为内联样式的优先级会比外部链接高。但是在现实中，还是会出现意外，就是在手机iphone上，touch会触发css的hover，而这个触发大概率会在touchstart事件之前。在这个事件中会判断当前是显示还是隐藏。state，因为css的hover起作用了，判断为显示，然后隐藏。也就是说点一次是出不来的，需要点两次。所以最好不要两者同时写。第二种情况，使用子元素，更简单。把悬停的目标和隐藏的对象当作同一个父容器的子元素，然后在父容器上写悬停。隐藏元素上不用像上面这样写hover:.marker-container.detail-info{display:none}.marker-container:hover.detail-info{display:block}最后只有一些常用的此处显示的使用函数。其实有很多功能都可以通过CSS来实现。有兴趣的同学继续研究更多不依赖JavaScript的CSS功能。
