<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 .fontSize22

 {

     font-size:22px;

 }

 .fontWeight

 {

     font-weight:bold;

 }

 </style>

 </head>

 <body>

 <div id="div1" class="fontSize22 fontWeight"  style="color:red">div实例文本</div>

 <button onclick="changeStyle()">changeStyle()</button>

 <script>

 function changeStyle()

 {

     var div1 = document.getElementById("div1");

     //div1.className = "fontSize22";

     //div1.className += " fontWeight";

     //删除单个class=""样式

     //div1.className = div1.className.replace(/fontSize22/,"");

     //删除所有class=""样式

     //div1.removeAttribute("class");

     //删除style=""中的单个样式

     div1.style.cssText = div1.style.cssText.replace(/red/,"blue");

     //删除style=""中的所有样式

     //div1.style.cssText = "";

 }

 </script>

 </body>

 </html>

javascript操作class和style样式的更多相关文章

  1. javascript操作元素的css样式

    我们经常要使用Javascript来改变页面元素的样式.当中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们一般是通过处理HTML Dom的classname特性 ...

  2. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  3. DOM Style样式对象的详细用法

    DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head>     ...

  4. JS学习之动态加载script和style样式

    前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点".我们都知道一个基本的网页 ...

  5. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  6. Python javascript操作DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  7. javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  8. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  9. 你所不了解的javascript操作DOM的细节知识点(一)

    你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...

随机推荐

  1. JQuery操作Table元素

    使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...

  2. java 基本类型

    1 常量 整数 byte 1字节 8位 -27~27-1 0111 1111 ~1000 0000 short 2 16     int 4 32     long 8 64     1111 111 ...

  3. GO简易聊天系统后台源码分享

    本人是搞移动客户端开发的,业余时间接触到golang这么个可爱的囊地鼠,于是就写了这么个测试项目:简易版的聊天系统,功能包括注册,登陆,群聊和单聊,无需使用mysql,数据都存在了文本里.本人纯粹兴趣 ...

  4. 二维数组的传输 (host <-> device)

    前言 本文的目的很明确:介绍如何将二维数组传递进显存,以及如何将二维数组从显存传递回主机端. 实现步骤 1. 在显存中为二维数组开辟空间 2. 获取该二维数组在显存中的 pitch 值 (cudaMa ...

  5. 在centos使用rpm包的方式安装mysql，以及更改root密码

    在centos使用rpm包的方式安装mysql,对于centos官方实际推荐使用yum进行安装,下载安装的方式主要用于内网服务器不能连接外网yum源的情况. 下载包 首先根据centos版本在mysq ...

  6. UDP 打洞 原理解释

    终于找到了一份满意的UDP打洞原理解释,附上正文,自己整理了一下源码 3.3. UDP hole punching UDP打洞技术 The third technique, and the one o ...

  7. 参数化SQL sql语句

    在日常的数据插入时,需要避免数据脚本注入攻击,所以进行参数化SQL很有必要. --说明参数 ) --参数赋值 ' --数据插入 ,'A')

  8. LinkedHashSet与TreeSet

    区别 类型 实现 特点 TreeSet hashMap.实现sortedSet接口 升序(基本类型--),自定义 LinkedHashSet HashSet 初始顺序 **注意点: 1.treeSet ...

  9. Codeforces Round #372 (Div. 2) A B C 水 暴力/模拟 构造

    A. Crazy Computer time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  10. mybatis处理小于号

    Mybatis中xm文件里写小于等于时间,不能直接写 <=,要写成 and reg_time <![CDATA[ <= ]]> #{params.endTime} 下面引用自m ...