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 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
js函数般调用正则
Apr 08 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
AngularJS执行流程详解
Feb 17 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
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初学者最感迷茫的问题小结
2010/03/27 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
Python中的多重装饰器
2015/04/11 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python中logging实例讲解
2019/01/17 Python
Django框架安装方法图文详解
2019/11/04 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
留学推荐信怎么写
2014/01/25 职场文书
个人优缺点自我评价
2014/01/27 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
JS封装cavans多种滤镜组件
2022/02/15 Javascript