<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .red{

            color:red

        }

        .green{

            color: green;

        }

        .blue{

            color: blue;

        }

        .underline{

            text-decoration: underline;

        }

    </style>

</head>

<body>

<ul>

    <li class="red">前端与移动开发</li>

    <li class="blue">java</li>

    <li>javascript</li>

    <li class="red">c++</li>

</ul>

<input type="button" value="为第一个li元素添加样式" id="add">

<input type="button" value="为第二个li元素移除样式" id="remove">

<input type="button" value="为第三个li元素切换样式" id="toggle">

<input type="button" value="判断第四个li元素是否包含某个样式" id="contain">

<script>

    window.onload=function(){

        /*add:为元素添加指定名称的样式.一次只能添加一个样式*/

        document.querySelector("#add").onclick=function(){

            /*classList:当前元素的所有样式列表-数组*/

            document.querySelector("li").classList.add("red");

            document.querySelector("li").classList.add("underline");

            //document.querySelector("li").className="red underline"

            /*获取样式*/

            var result=document.querySelector("li").classList.item(2);

            console.log(result);

        }

        /*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("green");

        }

        /*contains:判断元素是否包含指定名称的样式，返回true/false*/

        document.querySelector("#contain").onclick=function(){

            var isContain=document.querySelectorAll("li")[3].classList.contains("red");

            console.log(isContain);

        }

    }

</script>

</body>

</html>

　　

HTML5-Classlist样式操作的更多相关文章

  1. 深入学习jQuery样式操作

    × 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作 前面的话 使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...

  2. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  3. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  4. 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）

    DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...

  5. 解密jQuery内核 样式操作

    基础回顾 jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的,本章通一下分解探究下jquery里这部分代码的实现 那么jQuery要处理样式的哪些问题? 先简单回顾下样式操作会遇到 ...

  6. jQuery 2.0.3 源码分析 样式操作

    根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...

  7. JQuery_元素样式操作

    元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握.  一.css()方法 ...

  8. JavaScipt 样式操作

    我们知道HTML样式定义的三种方式: <link/>外部引入也就是定义 CSS 中的 <style/>嵌入式样式 style特性地定义 给一个HTML元素设置css属性,如: ...

  9. DOM样式操作

    CSS 到 DOM的抽象 通过操作 CSS 对应的 DOM对象来更新CSS样式 换肤操作 如何获取实际的样式(不仅有行内,更有页面和外联样式表中定义的样式) 样式表分为三类: 外联,页面,行内 内部样 ...

  10. jQuery - 5.样式操作

    样式操作 1.获取样式 attr("class"), 2.设置样式attr("class","myclass"), 3.追加样式addCla ...

随机推荐

  1. JavaScript ES6 Promise对象

    说明 Node.js中,以异步(Async)回调著称,使用了异步,提高了程序的执行效率,但是,代码可读性较差的. 假如有几个异步操作,后一个操作需要前一个操作的执行完毕之后返回的数据才能执行下去,如果 ...

  2. 通过离线安装包解决了 from cryptography.hazmat.bindings._openssl import ffi, lib ImportError: /usr/local/python36/lib/python3.6/site-packages/cryptography-2.2.2-py3.6-linux-x86_64.egg/cryptography/hazmat/binding

    场景:内网服务器不能上外网(代理也不通!), 之前安装了PYTHON的几个安装包,但不是知道为什么无法使用PARAMIKO这个模块 在导入 from cryptography.hazmat.bindi ...

  3. kali优化配置（3）--工具箱

    1.netcat 收集信息.Telnet/banner.传输文本信息.连接服务器端口. *通过IP,连接服务器端口: *信息通信: *重定向符号:> (e.g:>>ps.txt:重定 ...

  4. linux开启 Sersync 守护进程进行数据同步

    a.配置 Sersync 环境变量 [root@SERSYNC sersync]# echo 'export PATH=$PATH:/usr/local/sersync/bin'>>/et ...

  5. whetstone

    https://www.cnblogs.com/findumars/p/4173040.html 下载源码:http://www.netlib.org/benchmark/whetstone.c ar ...

  6. CSS3 Transform实例

    移动translate <!doctype html> <html> <head> <meta charset="utf-8"> & ...

  7. 如何搭建一个spring boot项目

    什么是springboot? Spring Boot俗称微服务.Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特 ...

  8. Task2.设立计算图并自动计算

    1.numpy和pytorch实现梯度下降法 import numpy as np # N is batch size; N, D_in, H, D_out = 64, 1000, 100, 10 # ...

  9. Graph Convolutional Network

    How to do Deep Learning on Graphs with Graph Convolutional Networks https://towardsdatascience.com/h ...

  10. Hadoop 学习目录（搁置）

    简介 Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储.Hadoop实现了一个分布式文件系 ...