前端：使用CSS干JavaScript的活，Pseudo-class :empty

100人浏览 2024-11-12 08:34:08

废话不多说，直接来看，你要实现这个功能：点击提交按钮，如果email没有填写，就提示报错信息，如下图

一般你会这样设计，首先看HTML结构如下，很简单没什么特殊的，

用CSS给他们美化一下，显示如下：

最后JS来控制：

这样已经很好了，但这里有个问题，相信大家都发现了，就是在没有错误的情况下，那个空的红色错误提示框一直显示在那里，这不是我们想要的。

于是正常的思想就是：先把它默认隐藏起来，当提交按钮被点击时，如果发生错误再把它一起显示出来。这就需要用JavaScript来控制了，比如错误发生时，使用Javascript给那个error div多设置一个display:block或者apply一个显示的class

其实有更好的办法，就是我们今天的主角Pseudo-class :empty

看下面的CSS使用：

仅仅需要几行简单的CSS就可以实现，它表示，如果这个error div的内容是空时，就使用这条样式，就是隐藏这个error

最终效果如下，是不是很不错：

最后，它是所有浏览器都支持的，请大家放心使用。

相关推荐