javascript操作class和style样式
<!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样式的更多相关文章
- javascript操作元素的css样式
我们经常要使用Javascript来改变页面元素的样式.当中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们一般是通过处理HTML Dom的classname特性 ...
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- DOM Style样式对象的详细用法
DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head> ...
- JS学习之动态加载script和style样式
前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点".我们都知道一个基本的网页 ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- Python javascript操作DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- javaScript操作DOM对象(看三遍,敲三遍,写三遍! 不会你找我)!!
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- 你所不了解的javascript操作DOM的细节知识点(一)
你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...
随机推荐
- ASP.NET MVC之视图生成URL
在MVC的Web应用程序中,我们经常会出现这样的操作,从一个视图跳转到另外一个视图,大部分情况下都是通过链接来实现,当然这是一种非常不错的选择,为什么不说这是最好的选择呢?因为它也有其弊端,我们看看如 ...
- iOS-NSThread使用
NSThread: 优点:NSThread 比其他两个轻量级(Cocoa NSOperation.GCD) 缺点:需要自己管理线程的生命周期,线程同步.线程同步对数据的加锁会有一定的系统开销 Coco ...
- dedecms 按照栏目指定的id排序
方法: 1.打开include/taglib/channelartlist.lib.php,找到大约78行,把 代码如下(一定要注意表名一致): $dsql->SetQuery("SE ...
- python+webdriver ppt
一:selenium webdriver的介绍 1.来源,优点,局限性 2.和其他自动化工具对比 3.工作原理 4.组成部分 二:webdriver的api介绍 1.driver 2.元素定位(id, ...
- PAT (Basic Level) Practise:1009. 说反话
[题目链接] 给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式:测试输入包含一个测试用例,在一行内给出总长度不超过80的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字 ...
- Java 中的数组操作
前言 在Java中,有很多封装好的类可以用来操纵数组(排序,复制等等),使得数组使用起来非常的方便.这就是高级语言带来的好处. 代码示例 - 一维数组 package test; import jav ...
- shell 脚本实战笔记(1)--source/fork/exec的区别
在linux shell编程中, 随着脚本处理规模的变大, 会嵌套调用子进程. 但父进程以不同的方式调用子进程, 其结果和背后的机制不尽相同.这边就简单描述下source/fork/exec调用子进程 ...
- C# 托管资源和非托管资源
托管资源指的是.NET可以自动进行回收的资源,主要是指托管堆上分配的内存资源.托管资源的回收工作是不需要人工干预的,有.NET运行库在合适调用垃圾回收器进行回收. 非托管资源指的是.NET不知道如何回 ...
- 浅谈C中的malloc和free
转自http://bbs.bccn.net/thread-82212-1-1.html非常感谢作者 浅谈C中的malloc和free 在C语言的学习中,对内存管理这部分的知识掌握尤其重要!之前对C中的 ...
- c++函数重载---2
原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 写在前面: 函数重载的重要性不言而明,但是你知道C++中函数重载是如何实现的呢(虽然本文谈的是C++中函 ...