<!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. VIM_插件

    VIM进阶:插件     通过一段时间的练习,你就可以非常熟练的使用VIM.即使是"裸奔",VIM已经足够强大,能够完成日常的绝大部分工作.     但VIM更加强大的是它的扩展机 ...

  2. URAL 2040 （回文自动机）

    Problem Palindromes and Super Abilities 2 (URAL2040) 题目大意 给一个字符串,从左到右依次添加,询问每添加一个字符,新增加的回文串数量. 解题分析 ...

  3. 第一个sprint与第二个sprint 阶段总结

    总体来说: 1.团队合作情况: 整个队伍配合得还算是不错的了,有些队员比较积极与主动,这是比较好的现象,因为一个队伍最终要的是活力与团结,至少我是这样认为的,如果一个队伍每个人都不干活,我想后果是不堪 ...

  4. hihoCoder #1246 : 王胖浩与环 （数学）

    题意: 有一个环形序列,可以将其切成连续的k段子序列,那么gcd( 每段子序列的和 )就是优美程度.输出n个整数,表示当k=[1, n] 时的最大优美程度. 思路: 观察一下,当切成1段的时候,gcd ...

  5. 《JavaScript Ninja》之挥舞函数

    挥舞函数 匿名函数为什么如此重要 通常使用匿名函数的情况是,创建一个供以后使用的函数.例如,将匿名函数保存在一个变量里,将其作为一个对象的方法,或者是将匿名函数作为一个回调.-->在这些情况下, ...

  6. 帝国cms相关调用

    Loop用法:[!--temp.header--] [e:loop={6,6,0,1}] <!--标题连接/标题--> <a href="<?=$bqsr[title ...

  7. dedecms 列表页调用自定义字段

    在列表附加字段中添加自己定义的字段 如: lwulr调用:{dede:list addfields="lwurl" channelid="1"}[field:l ...

  8. free命令

    最近服务器总是出问题,研究一下free 以M的形式显示: 参数: Swap 是交换区信息, Swap空间的作用可简单描述为:当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当 ...

  9. SourceTree不出现用户登录窗口，提示错误fatal: unable to access'...'; error setting certificate verify locations

    SourceTree不出现用户登录窗口,提示错误fatal: unable to access'...'; error setting certificate verify locations; .. ...

  10. 使用Hibernate命名查询

    HQL查询支持将查询所用的HQL语句放入配置文件中,而不是代码中,在Hibernate映射文件的<hibernate-mapping>元素中使用<query>子元素来定义命名查 ...