JS添加或修改控件的样式(Class)实现方法


Posted in Javascript onOctober 15, 2016

使用js 给页面组件添加class 或者删除class,以及使用jquery的方式添加或修改。

<input id="txtBianCeng" type="text" /> 
   
.lezhu99 { 
  color:#cc0000; 
} 
   
添加或修改样式(Class) 
document.getElementById("txtBianCeng").className = "lezhu99"; 
   
删除样式(Class) 
document.getElementById("txtBianCeng").className = "";

需要注意的是,在 JavaScript 中,样式使用的是 className 去访问 class 属性,非 class,因为 class 是一个保留关键字,谨记这一点。

如果是使用 jQuery修改标记的样式(Class) 就不一样了,它是使用 removeClass 和 addClass 方法进行删除样式和添加(修改)样式的。

以上就是小编为大家带来的JS添加或修改控件的样式(Class)实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
JS定时器实例
Apr 17 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
原生JS实现的放大镜效果实例代码
Oct 15 #Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 #Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 #Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 #Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 #Javascript
jQuery ajaxForm()的应用
Oct 14 #Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 #Javascript
You might like
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
常用PHP封装分页工具类
2017/01/14 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
php源码的使用方法讲解
2019/09/26 PHP
再谈javascript面向对象编程
2012/03/18 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
python获取txt文件词向量过程详解
2019/07/05 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
小学毕业家长寄语
2014/01/19 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
赞助商致辞
2015/07/30 职场文书
获奖感言怎么写
2015/07/31 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL