利用js设置css样式的解决方法

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1问题描述

在实际的表单验证的时候，可能会对一些所填内容进行验证，而如何做到：既能提示用户信息格式书写错误，又能有好的用户体验度？

2问题分析

表单验证十分的普遍，一般表单验证后所提示的内容都是采用js动态设置css样式的方式来变换颜色。使用js控制css负担十分的小，也十分便捷。

3解决方案

在修改密码时一定让用户输入两次，如果第二次输入与第一次一致时，输入框外就会显示绿色的提示文字，如果第二次输入与第一次不一致时，输入框外就会显示红色的提示文字。颜色的改变其实就是使用了js动态改变css。

①直接设置style的属性

（但很多情况下，设置!important值无效）

如果属性值含有‘-’：若想保留原格式，即采用中括号的方式表示；若不想保留，则使用驼峰命名法。

②直接设置属性（大多数属性都能够进行识别，但属性值可能不会被识别，最好还是使用字符串输出较好）

③设置style的属性（较麻烦，一般不采用）

④设置cssText（较好）

⑤改变class（较麻烦，改变会覆盖原有的class，而不能继承）

⑥引用外部css

4总结

本文简述了对于如何利用js动态改变css，较多情况下都会被使用到，是个十分重要的知识，但具体使用哪一种方法进行设置，读者可以根据喜好进行选择。

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！