H5 操作class 类样式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" media="screen">
.red {
color: red;
} .underline {
text-decoration: underline;
} .blue {
color: blue;
}
</style>
</head> <body>
<ul>
<li>听说白雪公主在逃跑</li>
<li class="blue">小红帽在担心大灰狼</li>
<li>听说疯帽喜欢爱丽丝</li>
<li>丑小鸭会变成白天鹅</li>
</ul>
<input type="button" value="为第一个元素添加样式" id="add">
<input type="button" value="为第二个元素移除样式" id="remove">
<input type="button" value="为第三个元素切换样式" id="toggle">
<input type="button" value="判断第四个元素是否包含样式" id="contain">
<script>
window.onload = function () {
// querySelector:返回文档中匹配指定的CSS选择器的第一元素
// querySelectorAll:返回文档中匹配的CSS选择器的所有元素节点列表 // add:为元素添加指定名称的样式，一次只能添加一个样式
document.querySelector("#add").onclick = function () {
// classList：当前元素的所有样式列表-数组
document.querySelector("li").classList.add("red");
document.querySelector("li").classList.add("underline");
} // remove：为元素移除指定名称的样式（不是移除class属性），一次也只能移除一个
document.querySelector("#remove").onclick = function () {
document.querySelector(".blue").classList.remove("blue");
} // toggle：切换元素的样式，如果元素之前没有指定名称的样式则添加，如果有则移除
document.querySelector("#toggle").onclick = function () {
document.querySelectorAll("li")[2].classList.toggle("red");
} // contains：判断元素是否包含指定名称的样式，返回true/false
document.querySelector("#contain").onclick = function () {
var isContain = document.querySelectorAll("li")[3].classList.contains("red");
alert(isContain)
} }
</script> </body> </html>
H5 操作class 类样式的更多相关文章
- jQuery 源码分析(十四) 数据操作模块 类样式操作 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...
- jQuery对标签、类样式、值、文档、DOM对象的操作
jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...
- Win32编程：窗口类样式+窗口外观样式+窗口显示样式
1.窗口类样式WNDCLASS.style CS_VREDRAW 提供窗口位置变化事件和高度变化事件的处理程序,功能是重绘窗口 CS_HREDRAW 提供窗口位置变化事件和宽度变化事件的处理程序,功能 ...
- JavaScript(第二十天)【DOM操作表格及样式】
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...
- JavaScript--DOM操作表格及样式(21)
一 操作表格 // <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = d ...
- jQuery----操作类样式（依托开关灯案例）
在网页开发中,元素的样式可以在style标签中定义,但是有很多案例需要添加类样式或者删除类样式,可以获取元素调用css()方法改变元素样式,但是这种方法很繁杂,本文利用开关灯案例,小结使用jquery ...
- JavaScript--Dom操作元素的样式
在前端开发中,有时候需要动态修改的网页元素的样式,这里将使用JS动态修改元素样式的方法做个小结: 网页结构: 按钮: 标签:input 类型:button id:btn ...
- IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件
IIS 配置 FTP 网站 在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...
- XML格式示例 与 XML操作(读取)类封装
header('Content-Type: text/xml'); <?xml version="1.0" encoding="utf-8" standa ...
随机推荐
- Python 使用BeautifulSoup模块抽取数据
- [运维]Dell R710 raid配置 标签： raid运维 2017-04-15 19:35 581人阅读 评论(16)
Dell R系列的一些服务器,raid的配置都大同小异,公司大部分的服务器,都是Dell R710型号的,这个型号的raid界面配置起来还是很简单的,下面来跟随小编体验一下raid如何配置吧.ps:图 ...
- Node.js入门笔记
第一步自然是安装了.我是用Webstorm这个ide,安装分2步: 1.安装nodejs,下载Windows下的安装版本号.注意是以msi为扩展名的,然后下一步.没啥好说的,下载地址例如以下: 32位 ...
- 阿里小二的日常工作要被TA们“接管”了！
昨天有人偷偷告诉我说 阿里巴巴其实是一家科技公司! 我想了整整一夜 究竟是谁走漏了风声 那么重点来了,阿里到底是如何在内部的办公.生活中,玩转“黑科技”的呢? AI取名:给你专属的“武侠”花名 花名是 ...
- Web富媒体应用
曾几何时,大家都在以flash开发的富媒体交互应用而感叹,一是叹它的丰富多彩的效果,一是叹它的局限.性能以及加载时长等问题. 如今,市场以及基本上没有flash什么事情了,而是H5的天下,可惜,移动应 ...
- 【C++】去除vector里重复元素的方法比较
背景:构造一个无重复的白名单,之后要在里面进行二分查找.故要求名单有序,且无重复,并且要进行二分查找,所以要采用有:随机访问迭代器类型的容器.这类容器有vector,array,deque.显然要ve ...
- mogodb 修改字段属性
修改为decimal类型 db.shopgoods.find({'Pricing.Detail':{$type:2}}).forEach(function(x){x.Pricing.Detail=Nu ...
- Libevent：11使用Libevent的DNS上层和底层功能
Libevent提供了一些API用来进行DNS域名解析,并且提供了实现简单DNS服务器的能力. 本章首先描述域名解析的上层功能,然后介绍底层功能及服务器功能. 注意:Libevent的当前DNS客户端 ...
- Java练习 SDUT-3106_小鑫数数儿
小鑫数数儿 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 某天小鑫忽然得到了许多的数字,他很好学,老师给他布置了一个任 ...
- @atcoder - AGC036F@ Square Constraints
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个整数 N,统计有多少个 0~2N-1 的排列 \(P_0 ...