<!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. UI基础:UITableView的编辑和移动

    相对UITableViiew进行编辑,必须设置代理,让代理遵循UITableViewDataSource和UITableViewDelegate协议.因为需要代理实现协议中几个必须的方法. UITab ...

  2. Could not launch "app_name"

    真机测试 不报错 编译通过后 Xcode总出这个错 process launch faild:NotFound-------解决办法 :重启设备

  3. 微信公众号 SDK

    <?php /* 方倍工作室 http://www.fangbei.org/ CopyRight 2015 All Rights Reserved */ define("TOKEN&q ...

  4. esayui-datagrid的使用

    第一步:在页面上引入easyui的jQuery链接 <script src="../../Scripts/easyUI/jquery-1.7.2.min.js" type=& ...

  5. Magento速度优化

    一.Magento Compiler可以提高 25% 到 50% 速度 Magento的性能一直是大家比较关心的焦点,现在Magento最新的版本 1.3.2.2 增加了 Magento Compil ...

  6. 转：Bat命令学习

    转:http://www.cnblogs.com/SunShineYPH/archive/2011/12/13/2285570.html一.基础语法: 1.批处理文件是一个“.bat”结尾的文本文件, ...

  7. dedecms SQL数据库连接信息注解(借鉴)

    <?php $cfg_dbhost = 'localhost'; //数据库地址,这里的localhost指的是本机$cfg_dbname = 'hunuo'; //数据库名$cfg_dbuse ...

  8. Java 内部类和匿名类 实现JButton动作 ActionListener类

    import javax.swing.*; import java.awt.*; import java.awt.event.*; public class ControlCircle2 extend ...

  9. ZOJ 1047 Image Perimeters

    原题链接 题目大意:鼠标点击一块,求与之联通的所有区域的边长之和. 解法:广度优先搜索.从选中的这个点开始,往周围8个点依次搜索,访问过的点做上标记.如果该点上下左右的一个或多个方向没有相邻的点,边长 ...

  10. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...