<!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. Oracle之共享服务器模式

    在共享服务器体系结构中,一个dispatcher分派器将传入网络的多个会话请求定向到一个共享服务器进程池,消除了为每个连接分配一个专用服务器进程的需要.作为一般的指导原则,仅当系统需要并发连接到数据库 ...

  2. 前端开发HTML&css入门——CSS的文本格式化

    长度单位 像素 px 百分比 % em - 像素是我们在网页中使用的最多的一个单位, * 一个像素就相当于我们屏幕中的一个小点, * 我们的屏幕实际上就是由这些像素点构成的 * 但是这些像素点,是不能 ...

  3. ReactiveObjC（RAC）的使用汇总

    RAC 指的就是 RactiveCocoa ,是 Github 的一个开源框架,能够帮我们提供大量方便的事件处理方案,让我们更简单粗暴地去处理事件,现在分为 ReactiveObjC 和 Reacti ...

  4. Docker实战部署应用——MySQL5.7

    MySQL 部署 拉取MySQL镜像 拉取命令: docker pull mysql:5.7 查看镜像 docker images 创建 MySQL 容器 docker run -id --name= ...

  5. Linux下C语言实现ATM取款机，消息队列版本

    链接:https://pan.baidu.com/s/1oBavXBuZul7ZAEBL1eYfRA 提取码:ffhg Mybank ATM取款机实验,消息队列实现本实验用的是Centos71.在服务 ...

  6. 随笔3 HashMap<K,V>

    equals.hashcode和==的区别 在介绍HashMap之前,我想先阐述一下我对这三者的理解,equals这个方法呢,就是在判断是否为同一对象(注意,这里的同一对象和相同的内存地址是不同的), ...

  7. group_by

    1.按照一个列或者多个列对数据分组 2.对每个组进行聚合操作 3. 对聚合后的结果进行判断 1. select avg(score) as score from teacher 2. select   ...

  8. AOP技术介绍－－（.Net中关于AOP的实现）

    一.AOP实现初步       AOP将软件系统分为两个部分:核心关注点和横切关注点.核心关注点更多的是业务逻辑,关注的是系统核心的业务:而横切关注点虽与核心的业务实现无关,但它却是一种更通用的业务, ...

  9. Linux学习-基于CentOS7的MariaDB数据库的主从复制

    一.MySQL主从复制原理 主从同步过程中主服务器有一个工作线程I/O dump thread,从服务器有两个工作线程I/O thread和SQL thread: 主服务器: dump Thread: ...

  10. Activiti插件安装(二)

    Eclipse安装 网络在线安装:1) 打开 Help -> Install New Software. 在如下面板中: 2) 在如下 Install 界面板中,点击 Add 按钮: 配置新装插 ...