欢迎点击「算法与编程之美」↑关注我们!
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。
1问题描述
在实际的表单验证的时候,可能会对一些所填内容进行验证,而如何做到:既能提示用户信息格式书写错误,又能有好的用户体验度?
2问题分析
表单验证十分的普遍,一般表单验证后所提示的内容都是采用js动态设置css样式的方式来变换颜色。使用js控制css负担十分的小,也十分便捷。
3解决方案
在修改密码时一定让用户输入两次,如果第二次输入与第一次一致时,输入框外就会显示绿色的提示文字,如果第二次输入与第一次不一致时,输入框外就会显示红色的提示文字。颜色的改变其实就是使用了js动态改变css。
①直接设置style的属性
(但很多情况下,设置!important值无效)
如果属性值含有‘-’:若想保留原格式,即采用中括号的方式表示;若不想保留,则使用驼峰命名法。
②直接设置属性(大多数属性都能够进行识别,但属性值可能不会被识别,最好还是使用字符串输出较好)
③设置style的属性(较麻烦,一般不采用)
④设置cssText(较好)
⑤改变class(较麻烦,改变会覆盖原有的class,而不能继承)
⑥引用外部css
4总结
本文简述了对于如何利用js动态改变css,较多情况下都会被使用到,是个十分重要的知识,但具体使用哪一种方法进行设置,读者可以根据喜好进行选择。
温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!
领取专属 10元无门槛券
私享最新 技术干货