JavaScript操作class和style样式代码详解


Posted in Javascript onFebruary 13, 2016

废话不多说了,直接给大家贴js代码了,具体代码如下所示:

<!doctype html>
<html>
<head>
<meta charset="utf-">
<title>无标题文档</title>
<style>
.fontSize
{
font-size:px;
}
.fontWeight
{
font-weight:bold;
}
</style>
</head>
<body>
<div id="div" class="fontSize fontWeight" style="color:red">div实例文本</div>
<button onclick="changeStyle()">changeStyle()</button>
<script>
function changeStyle()
{
var div = document.getElementById("div");
//div.className = "fontSize";
//div.className += " fontWeight";
//删除单个class=""样式
//div.className = div.className.replace(/fontSize/,"");
//删除所有class=""样式
//div.removeAttribute("class");
//删除style=""中的单个样式
div.style.cssText = div.style.cssText.replace(/red/,"blue");
//删除style=""中的所有样式
//div.style.cssText = "";
}
</script>
</body>
</html>

以上内容是针对JavaScript操作class和style样式代码详解的全部内容,希望对大家有所帮助。

Javascript 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
JS提交form表单实例分析
Dec 10 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
javascript实现查找数组中最大值方法汇总
Feb 13 #Javascript
JavaScript常用数组算法小结
Feb 13 #Javascript
Javascript 字符串模板的简单实现
Feb 13 #Javascript
javascript基础知识分享之类与函数化
Feb 13 #Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 #Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 #Javascript
js随机生成26个大小写字母
Feb 12 #Javascript
You might like
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python web框架中实现原生分页
2019/09/08 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Series和DataFrame使用简单入门
2019/11/13 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
Python 里最强的地图绘制神器
2021/03/01 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
英语专业推荐信
2013/11/16 职场文书
学生喝酒检讨书
2014/02/06 职场文书
优秀部门获奖感言
2014/02/14 职场文书
化学教学随笔感言
2014/02/19 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
中国合伙人观后感
2015/06/02 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python