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 ...
随机推荐
- 移动web的基础知识
一.像素 px:CSS pixels逻辑像素,浏览器使用的抽象单位 dp,pt:设备无关像素 (物理像素) dpr:设备像素缩放比 计算公式: 1px = (dpr)*(dpr)*dp 二.viewp ...
- Sum Root to Leaf Numbers深度优先计算路径和
Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...
- 【Leetcode 堆、快速选择、Top-K问题 BFPRT】数组中的第K个最大元素（215）
这道题很强大,引出了很多知识点 题目 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5 ...
- R语言均值,中位数和模式
R语言均值,中位数和模式 在R统计分析是通过用许多内置函数来执行的. 大多数这些函数是R基本包的一部分.这些函数需要R向量作为输入参数并给出结果. 我们正在讨论本章中的函数是平均数,中位数和模式. 平 ...
- Spark day06
SparkStreaming简介 SparkStreaming是流式处理框架,是Spark API的扩展,支持可扩展.高吞吐量.容错的实时数据流处理,实时数据的来源可以是:Kafka, Flume, ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十八章：立方体贴图
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十八章:立方体贴图 代码工程地址: https://github.c ...
- iOS 9 新特性之实现 3D Touch
http://www.cocoachina.com/ios/20151027/13812.html 10月19号,周末,起床去吃早餐,吃完回来顺便去沃尔玛逛逛,把晚上的菜给买了,逛着逛着就来到了卖苹果 ...
- python 正确地初始化对象
- MUI - 封装localStorage与plus.storage
MUI - 封装localStorage与plus.storage 2.0版本 在使用plus.storage频繁地存取数据时,可以感觉到明显的卡顿,而且很耗内存, 在切换到localstorage时 ...
- 微信小程序云数据库——where查询和doc查询区别
用法 条件查询where 我们也可以一次性获取多条记录.通过调用集合上的 where 方法可以指定查询条件,再调用 get 方法即可只返回满足指定查询条件的记录,比如获取用户的所有未完成的待办事项,用 ...