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的简单实现折叠菜单代码
Sep 15 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
vue使用echarts实现折线图
Mar 21 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
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP通用检测函数集合
2011/02/08 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
公路绿化方案
2014/05/12 职场文书
讲党性心得体会
2014/09/03 职场文书
数学教师个人总结
2015/02/06 职场文书
防溺水主题班会教案
2015/08/12 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫