<!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. NSURLSessionDownloadTask的深度断点续传

    http://www.cocoachina.com/ios/20160503/16053.html 本文为投稿文章,作者:WeiTChen 对于后台下载与断点续传相信大家肯定不会陌生,那么如果要同时实 ...

  2. 详细介绍Java中的堆、栈和常量池

    下面主要介绍JAVA中的堆.栈和常量池: 1.寄存器 最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2. 栈 存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存放在 ...

  3. 2019-8-31-C#-对-byte-数组进行模式搜索

    title author date CreateTime categories C# 对 byte 数组进行模式搜索 lindexi 2019-08-31 16:55:58 +0800 2018-07 ...

  4. json格式示例

    案例一: {key:value,key:value} class Person{ String firstname = "张"; String lastname = "三 ...

  5. 移动端fixed定位在底部,出现键盘后消失

    jq var h=$(window).height(); $(window).resize(function() { if($(window).height()<h){ $('.nav').hi ...

  6. 【Leetcode 堆、快速选择、Top-K问题 BFPRT】数组中的第K个最大元素（215）

    这道题很强大,引出了很多知识点 题目 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5 ...

  7. objectarx之两条曲线最短距离

    double CCommonFuntion::GetLineDistance(AcDbObjectId& Line1, AcDbObjectId& Line2){ AcGeLineSe ...

  8. parkingLot

    一个支付宝停车支付生活号前端页面 //index.html //自定义键盘 <!DOCTYPE html> <html> <head> <meta chars ...

  9. rqnoj86 智捅马蜂窝

    题目描述 背景 为了统计小球的方案数,平平已经累坏了.于是,他摘掉了他那800度的眼镜,躺在树下休息. 后来,平平发现树上有一个特别不一样的水果,又累又饿的平平打算去把它摘下来. 题目描述 现在,将大 ...

  10. JavaScript--函数中（）的作用

    在函数中参数是函数的时候:function a(函数名) 与 function a(函数名()) 的区别: // 在函数里面() 是一个编组和立即执行的功能 /** * function autoPl ...