<!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. ORACLE 所有 表 记录 条数

    SELECT TABLE_NAME,TO_NUMBER(EXTRACTVALUE(XMLTYPE(DBMS_XMLGEN.GETXML('SELECT COUNT(*) CNT FROM '||TAB ...

  2. let 和const命令

    ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效.换句话说,let声明了块级作用域. 输出 看下面代码: 输出: 变量i是var声明的,在 ...

  3. LeetCode ---　Validate Binary Search Tree

    题目链接 判断一颗二叉树是否是二叉搜索树(二叉排序树),也就是BST 如果该二叉树是BST, 那么对其中序遍历,所得序列一定是单调递增的(不考虑有重复数值的情况) 附上代码: /** * Defini ...

  4. GeoServer手动发布本地Shapefile地图

    首先,本文实现的结果图给大家展现一下: 放大的样子: 颜色是通过属性中某个字段值来分级的,可以自定义. 上面功能是用ArcGIS切片好数据,在Geoserver 中发布,并用google地图作为底图展 ...

  5. 原生js分页

    <html> <head> <meta charset='utf-8'> <style type="text/css"> #idDa ...

  6. Directx11学习笔记【九】 3D渲染管线

    原文:Directx11学习笔记[九] 3D渲染管线 原文地址:http://blog.csdn.net/bonchoix/article/details/8298116 3D图形学研究的基本内容,即 ...

  7. [React Native]高度自增长的TextInput组件

    之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这 ...

  8. 2019-2-3-VisualStudio-扩展开发-添加输出窗口

    title author date CreateTime categories VisualStudio 扩展开发 添加输出窗口 lindexi 2019-02-03 11:41:40 +0800 2 ...

  9. C＃判断文件是否被混淆

    可以使用混淆工具对一个DLL 和 exe 进行混淆. 但是如何知道一个文件是否已经混淆了. 在发布之前,需要知道是不是有文件忘了混淆. 要判断文件是否混淆,必须知道常用的混淆手法. 混淆就是因为编写的 ...

  10. 爬虫：Selenium + PhantomJS

    更:Selenium特征过多(language/UserAgent/navigator/en-US/plugins),以Selenium打开的浏览器处于自测模式,很容易被检测出来,解决方法可选: 用m ...