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 ...
随机推荐
- vue 微信内H5调起支付
在微信内H5调起微信支付,主要依赖于一个微信的内置对象WeixinJSBridge,这个对象在其他浏览器中无效. 主要代码: import axios from 'axios'; export def ...
- Hdu 4497
题目链接 已知 gcd(x, y, z) = G, lcm(x, y, z) = L, 求有多少种组合(x, y, z)可以满足条件.G, L都在32位int范围内. 思路: 素数分解 + 容斥 L ...
- 足迹地图 搜索jvectormap
https://blog.wangjunfeng.com/foot_print/
- Spark day05
Shark Shark是基于Spark计算框架之上且兼容Hive语法的SQL执行引擎,由于底层的计算采用了Spark,性能比MapReduce的Hive普遍快2倍以上,当数据全部load在内存的话,将 ...
- Directx11教程(34) 纹理映射(4)
原文:Directx11教程(34) 纹理映射(4) 本篇教程中,我们尝试在myTutorialD3D_27中改变采样状态描述符的各种设置,看纹理贴图的方式有什么变化. 原始的代码是: ...
- jQuery纵向分类下拉菜单导航
在线演示 本地下载
- oralce系统触发器
系统事件是指基于oracle事件(例如logon.logoff和startup.shutdown)所建立的触发器,通过使用系统事件触发器,提供了跟踪系统或是数据库变化机制.下面介绍使用的系统事件属性函 ...
- oracle管理索引
索引是用于加速数据存取的数据对象,合理的使用索引可以大大降低I/O次数,从而提高数据访问性能.索引有很多种我们主要介绍常用的几种: 为什么添加了索引或,会加快查询速度呢? n 单列索引 单列索引是基 ...
- 草地排水 改了又改（DCOJ6013）
题目描述 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水．这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间．因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水淹没 ...
- C++之ARX，Acstring，ACahr转char
AcDbText* pText = AcDbText::cast(pEnt); AcString sText = DBHelper::AcStringFree(pText->textString ...