使用javascript操作css的两种方法,使用css
前言
所有可以用JavaScript编写的应用程序最终都会用JavaScript编写。——阿特伍德定律
虽然一切都可以是JavaScript，但在某种程度上，css的效率会比JavaScript高，所以我觉得用CSS能实现的东西，不用麻烦JavaScript。
这两种语言有不同的用途。随着浏览器版本特性和属性的增加，CSS正在成为一种强大的语言，可以处理我们过去依赖JavaScript实现的功能。
平滑滚动
曾经有一段时间，我们不得不依赖JavaScript的window.scrollY来执行这个操作。如果我们想平滑滚动，我们必须依靠计时器来添加动画。通过添加scroll-behavior属性，我们可以使用一行CSS代码来处理网站上的平滑滚动！浏览器支持75%左右，兼容性相当不错。
html { scroll-behavior:smooth；}
录制画面2021-07-18 10 . 14 . 21 . gif
完整代码[1]
滚动捕抓
幻灯片，图片库，这些也是前端高频功能。上一代CSS能力有限，只能依靠JavaScript来完成这个功能。现在只需要几行代码就可以实现这个功能。从某种意义上来说，它的工作原理类似于Flexbox或CSS Grid，也就是你需要一个容器元素，在这个容器元素上设置scrolln-snap-type和多个设置了scroll-snap-align的子元素，如下图所示：
main class=" parent " section class=" child "/section section class=" child "/section section class=" child "/section/main . parent { scroll-snap-type:x强制；}.child { scroll-snap-align:start；}
录制画面2021-07-17 10 . 23 . 04 . gif
完整代码[2]
CSS动画
曾经有一段时间，大多数开发人员使用JavaScript(或jQuery)来为浏览器中的元素添加动画。稀释这个放大那个很简单。随着交互式项目越来越复杂，移动设备越来越多，性能变得越来越重要。Flash被抛弃了，有才华的动画开发人员使用HTML5实现了过去从未实现过的效果。他们需要更好的工具来开发复杂的动画序列并获得最佳性能。JavaScript(或者jQuery)做不到。随着浏览器的成熟，也开始提供一些解决方案。最广泛接受的方案是使用CSS动画。
录制屏幕2021-07-17 10 . 38 . 14 . gif
完整代码[3]
表单验证
html5丰富了表单元素，提供了必填、邮箱、电话等表单元素的属性。同样，我们可以使用：valid和：invalid来检查html5表单的属性。
:必需的伪类指定具有必需属性的表单元素：有效的伪类通过正确匹配指定必需的表单元素：无效的伪类指定与指定要求不匹配的表单元素。
录制画面2021-07-18 9 . 15 . 50 . gif
利用 CSS 的 content 属性 attr 抓取资料
想必大家都想到了之后的伪元素，但是如何得到文本呢？不能用JavaScript。
CSS的伪元素是一个非常强大的东西，我们可以将它用于许多应用程序。通常情况下，为了制造一些效果，内容：大多是留白的，但实际上，你可以写attr在里面捕捉信息！
Div data-msg=这里是获取内容的内容 hover/div div { width:100px；边框：1px纯红；位置：相对；} div:hover:after { content:attr(data-msg)；位置：绝对；字体大小：12px宽度：200%；行高：30px文本对齐：居中；左：0；top:25px；边框：1px纯绿；}
录制画面2021-07-18上午9点42分38秒。GIF格式
鼠标悬浮时显示
鼠标悬停的场景很常见，比如导航菜单：
image.png
一般来说，使用css来控制隐藏的东西，如菜单，作为悬停目标的子元素或相邻元素是很方便的。例如，上面的菜单是导航的相邻元素：
！-菜单是相邻的Li-Li class= user user/Lili class= menu ul Li帐户设定/lili注销/Li/ul/Li菜单在正常状态下是隐藏的：菜单{显示：无；}当悬停导航时，它会显示：
/*使用相邻的选择器并悬停*/。user:hover . menu { display:list-item；}注意这里用的是相邻选择器，这也是上面提到的写为相邻元素的原因。菜单的位置可以用absolute来定位。
同时，菜单本身也应该在悬停时显示，否则鼠标一离开导航菜单就会消失：菜单：悬停{ display:list-item；}这里会有一个小问题，就是菜单和导航需要挨着，否则上面加的菜单悬停如果中间有空隙就不行了，但实际上从审美的角度来说，两者是有距离的。其实这个问题很容易解决。只需在菜单上再画一个透明区域，如下图蓝色方块所示：
可以通过使用前/后伪类和用absoute定位来实现：
ul.menu:在{ content: 之前；位置：绝对；左：0；top:-20px；宽度：100%；高度：20px/*背景色：rgba(0，0，0，0.2)；*/}如果我既写css的悬停又听鼠标事件，用鼠标控制显示和隐藏，双重效果会怎样？如果我按照正常的常规，当我悬停在鼠标事件中时，我会添加一个显示样式：block，这将覆盖CSS设置。也就是说，只要被hhovered一次，css的代码就不行了，因为内联样式会优先于外链。但现实中会出现一个意外，就是在移动iphone上，触摸会触发css的悬停，而且这个触发大概率会在touchstart事件之前到来。在这种情况下，将判断当前状态是显示还是隐藏。因为CSS的悬停起了作用，所以判断是显示，然后隐藏。换句话说，一次点不了，就点两次。所以最好不要同时写。使用子元素的第二个场景更简单。把hover的目标和隐藏对象想象成同一个父容器的子元素，然后在这个父容器上写hover。您不必像上面那样为隐藏元素编写hover:marker-container . detail-info { display:none }marker-container:hover . detail-info { display:block }
最后
这里展示的函数只是一些常用的函数。其实有很多功能是可以通过CSS实现的。有兴趣的同学应该继续学习更多不依赖于JavaScript的CSS函数。
关于css实现的这篇文章到此为止，所以不要为JavaScript费心。更多相关CSS平滑滚动内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。