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

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

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

1问题描述

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

2问题分析

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

3解决方案

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

①直接设置style的属性

(但很多情况下,设置!important值无效)

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

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

③设置style的属性(较麻烦,一般不采用)

④设置cssText(较好)

⑤改变class(较麻烦,改变会覆盖原有的class,而不能继承)

⑥引用外部css

4总结

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181031G00J6Z00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券