<!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. The implementation of Lua 5.0 阅读笔记（二）

    6 线程和协程 读完这篇文章我才意识到python的协程到底缺了什么,这个就是coroutine和semi-coroutine的区别了.区别就是,semi-coroutine只能返回(yield)到调 ...

  2. js缓速运动

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. 哈夫曼树（Huffman Tree）与哈夫曼编码

    哈夫曼树(Huffman Tree)与哈夫曼编码(Huffman coding)

  4. IE6无法加载CSS

    问题:写了个页面,IE7和IE8下正常,但发现IE6下竟然没有加载css样式. 找原因,发现是因为CSS文件的编码不正确,页面是采用utf-8编码的,但样式表是复制过来的,编码是ANSI,这种情况下在 ...

  5. Linux常用命令整理 - imsoft.cnblogs

    su 用户名 在不退出登陆的情况下,切换到另外一个人的身份如果用户名缺省,则切换到root状态会提示输入密码,密码不回显的. 在用su命令切换root用户时,使用“-”选项,这样可以将root的环境变 ...

  6. Linux中“新旧”TCP/IP工具的对比

    如今很多系统管理员依然通过组合使用诸如ifconfig.route.arp和netstat等命令行工具(统称为net-tools)来配置网络功能.解决网络故障,net-tools起源于BSD的TCP/ ...

  7. 225. Implement Stack using Queues

    代码如下: class MyStack { // Push element x onto stack. Queue<Integer> queue=new ArrayDeque<> ...

  8. matlab 已知函数值纵坐标值（Y值）获得对应的横坐标

    clear all;clc; x=-pi/2:pi/50:pi; y=sin(x); plot(x,y); grid on; fm=max(y) id=find(y==fm); xm=x(id) 转自 ...

  9. C++ Primer : 第十一章 : 关联容器示例: 一个单词转换的map

    单词转换就是:将一些缩写的单词转换为实际的文本.第一个文件保存的是转换的规则,而第二个文件保存的是要转换的文本. 假设单词转换的规则的文件如下: brb be right back k okay? y ...

  10. tty驱动程序框架

    tty驱动程序框架 一.TTY概念解析 在Linux系统中,终端是一类字符型设备,它包括多种类型,通常使用tty来简称各种类型的终端设备. 1.1串口终端(/dev/ttyS*) 串口终端是使用计算机 ...