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 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
JavaScript 定时器详情
Nov 11 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
Vite + React从零开始搭建一个开源组件库
Jun 25 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
学习使用PHP数组
2006/10/09 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
vue给组件传递不同的值方法
2018/09/29 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
幼儿园五一活动方案
2014/02/07 职场文书
股东协议书
2014/04/14 职场文书
亲子活动总结
2014/04/26 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL