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 ...
随机推荐
- vs2015卸载、vs2008安装Visual Assist x
卸载2015 参考博文 1. 手动卸载VS2015的主要部分: win10系统: 控制面板---程序和功能--Microsoft Visual Studio 2015---更改卸载 2. 下载工具并解 ...
- 一文读懂JVM
(一)JVM 基础知识 1)Java 是如何实现跨平台的? 注意:跨平台的是 Java 程序,而不是 JVM.JVM 是用 C/C++ 开发的,是编译后的机器码,不能跨平台,不同平台下需要安装不同版本 ...
- gitlab 添加本地项目
1.安装git https://git-scm.com/downloads 2.新建工程 3.创建密钥 a.桌面右键 b.cd ~/.ssh/ 如果提示 “ No such file or di ...
- 2018-8-14-解决-VS-跳转定义和-Resharper-重复
title author date CreateTime categories 解决 VS 跳转定义和 Resharper 重复 lindexi 2018-8-14 17:35:6 +0800 201 ...
- ListView组件中 onEndReached 方法在滚动到距离列表最底部一半时执行
初次使用ListView,在写列表滚动到最底部自动加载使用到方法onEndReached, 发现: ListView组件中 onEndReached 方法在滚动到距离列表最底部一半时执行, 于是翻看文 ...
- 获取表单所有字段 Post
var params = $(".layui-form").serializeArray(); var values = {}; for (x in params) { value ...
- mysql 语句的查询过程解析
select * from tb where ID = 1 下面解析的查询过程都是基于上面的简单查询,该系列的所有素材都来自于丁奇的mysql的45讲 1.建立连接 a.客户端发出请求,请求首先到达连 ...
- EL表达式简单总结
EL表达式 ## EL表达式的取值范围 JSP的四个作用域: pagecontext(生命周期用户离开或者跳转页面,作用域范围这个页面) request(生命周期用户离开页面,作用于这个页面) ses ...
- CAD专用卸载修复工具,一键完全彻底卸载删除CAD软件的专用卸载工具
Autodesk CAD卸载工具(AUTO Uninstaller)是专门为了针对Autodesk CAD软件卸载不干净而导致CAD安装失败问题进行研发的Autodesk CAD一键卸载工具.现在虽然 ...
- 2019-10-7-WPF-如何跨线程重新抛出异常
title author date CreateTime categories WPF 如何跨线程重新抛出异常 lindexi 2019-10-07 13:24:54 +0800 2019-10-4 ...