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 单选框,多选框美化代码
Aug 01 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
PassWord输入框代码分享
Jun 07 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
js数组常用最重要的方法
Feb 04 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
深入解析koa之中间件流程控制
Jun 17 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设计模式 Observer(观察者模式)
2011/06/26 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python list转dict示例分享
2014/01/28 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
编写strcpy函数
2014/06/24 面试题
优秀党员主要事迹
2014/01/19 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
合作意向协议书范本
2014/03/31 职场文书
党务公开方案
2014/05/06 职场文书
实验室的标语
2014/06/20 职场文书
代办社保委托书范文
2014/10/06 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
机关保密工作承诺书
2015/05/04 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS