<!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. PYTHON网络爬虫与信息提取[正则表达式的使用](单元七)

    正则表达式由字符和操作符构成 . 表示任何单个字符 []字符集,对单个字符给出取值范围 [abc]或者关系  [a-z]表示 [^abc]表示非这里面的东西 非字符集 * 表示星号之前的字符出现0次或 ...

  2. JS 鼠标键盘HTML事件

  3. LeetCode169 Majority Element, LintCode47 Majority Number II, LeetCode229 Majority Element II, LintCode48 Majority Number III

    LeetCode169. Majority Element Given an array of size n, find the majority element. The majority elem ...

  4. php 如何生成静态页

    PHP文件名:dome.php <?php $string = 1; ob_start(); @readfile("templets/list.html"); $text = ...

  5. 遗传算法MATLAB实现(1):工具箱下载及安装

    到官网下载谢菲尔德大学的GA工具箱:http://codem.group.shef.ac.uk/index.php/ga-toolbox(其实蛮不懂为什么有人把这个传到某个网上还需要积分才能下载,人家 ...

  6. Servlet Cookies

    Cookie是在多个客户端请求之间持久存储的一小段信息. Cookie具有名称,单个值和可选属性,例如注释,路径和域限定符,生存周期和版本号. Cookie工作原理 默认情况下,每个请求都被视为新的请 ...

  7. 使用UITextView的dataDetectorTypes实现超链接需要注意的事项！

    项目中需要在UITextView上识别URL,手机号码.邮箱地址等等信息.那么就用到了它的dataDetectorTypes属性.我的UITextView加在UITableViewCell上面的,当单 ...

  8. C++返回值优化

    返回值优化(Return Value Optimization,简称RVO)是一种编译器优化机制:当函数需要返回一个对象的时候,如果自己创建一个临时对象用于返回,那么这个临时对象会消耗一个构造函数(C ...

  9. php上传文件与图片到七牛的实例详解

    上传文件到七牛最简单的方式就是使用七牛官方最新的SDK 用composer安装PHP SDK composer require qiniu/php-sdk 上传文件到七牛 use Qiniu\Auth ...

  10. pytest笔记

    -v 参数显示执行过程 测试覆盖率: ldy@ldy-D214:~/workspace/socai$ pipenv run pytest tests/unit/test_models.py --cov ...