<!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 类样式的更多相关文章

  1. jQuery 源码分析(十四) 数据操作模块 类样式操作 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...

  2. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  3. Win32编程：窗口类样式+窗口外观样式+窗口显示样式

    1.窗口类样式WNDCLASS.style CS_VREDRAW 提供窗口位置变化事件和高度变化事件的处理程序,功能是重绘窗口 CS_HREDRAW 提供窗口位置变化事件和宽度变化事件的处理程序,功能 ...

  4. JavaScript(第二十天)【DOM操作表格及样式】

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...

  5. JavaScript--DOM操作表格及样式(21)

    一 操作表格 // <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = d ...

  6. jQuery----操作类样式（依托开关灯案例）

    在网页开发中,元素的样式可以在style标签中定义,但是有很多案例需要添加类样式或者删除类样式,可以获取元素调用css()方法改变元素样式,但是这种方法很繁杂,本文利用开关灯案例,小结使用jquery ...

  7. JavaScript--Dom操作元素的样式

    在前端开发中,有时候需要动态修改的网页元素的样式,这里将使用JS动态修改元素样式的方法做个小结: 网页结构: 按钮: 标签:input    类型:button     id:btn          ...

  8. IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件

    IIS 配置 FTP 网站   在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...

  9. XML格式示例 与 XML操作(读取)类封装

    header('Content-Type: text/xml'); <?xml version="1.0" encoding="utf-8" standa ...

随机推荐

  1. PHP文件载入和载入路径

    一.文件载入 所谓的文件的载入,就是指将需要的目标文件的代码载入到当前的位置上,从某种意义上来说,文件载入也是一种流程控制! 文件载入的主要目的是体现网站的分层设计,因为不同的页面有很多相同的区域(相 ...

  2. 462. Minimum Moves to Equal Array Elements II

    Given a non-empty integer array, find the minimum number of moves required to make all array element ...

  3. Beetl 3中文文档 转载 http://ibeetl.com/guide/

    Beetl作者:李家智(闲大赋) <xiandafu@126.com> 1. 什么是Beetl 广告:闲大赋知识星球,付费会员 Beetl( 发音同Beetle ) 目前版本是3.0.7, ...

  4. Thrift源码分析（一）-- 基本概念

    我所在的公司使用Thrift作为基础通信组件,相当一部分的RPC服务基于Thrift框架.公司的日UV在千万级别,Thrift很好地支持了高并发访问,并且Thrift相对简单地编程模型也提高了服务地开 ...

  5. 初探postman

    第一种:安装postman 扩展程序 第二种:本地 安装postman 登陆进来postman的界面 发送第一个postman请求 将请求保存到集合 未完,待续...

  6. 阿里云文件存储CPFS正式商业化，提供云上高性能并行文件系统

    2018年3月份,阿里云推出文件存储CPFS产品.在经过近一年的上线公测后,CPFS即将迎来商业化,将为更多的客户提供云上高性能的并行文件存储. 坚如磐石的高性能计算存储 文件存储CPFS针对计算密集 ...

  7. PLAY2.6-SCALA(四) 请求体解析器

    一个http请求是一个请求头后面跟着一个请求体,头部信息比较短,可以安全的缓存在内存中,在Play中头部信息使用RequestHeader类进行建模.请求体的内容可能较大,使用流stream的形式进行 ...

  8. 2019-3-27-win10-uwp-动画移动滑动条的滑块

    title author date CreateTime categories win10 uwp 动画移动滑动条的滑块 lindexi 2019-03-27 10:51:32 +0800 2019- ...

  9. docker的ubuntu镜像无ifconfig和ping命令

    docker的ubuntu镜像无ifconfig和ping命令 或者 ubuntu系统中无ifconfig 和 ping 解决方案: 执行以下鸣冷: apt-get update apt-get in ...

  10. Android横竖屏切换和灭屏亮屏时Activity的生命周期探究(1)

    研究这个问题的初衷在于项目中碰到了一个问题:横屏的时候灭屏再亮屏,亮屏的时候用户能够清晰的看到先启动竖屏(过程1)再切换到横屏的过程,因为灭屏的时候onSaveInstanceState()保存的时横 ...