<!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. poj1011 Sticks （dfs剪枝）

    [题目描述] George took sticks of the same length and cut them randomly until all parts became at most 50 ...

  2. Hls平台实现sobel算法（一）

    索贝尔(Sobel)算子主要用于边缘检测,根据像素点的上下.左右邻点的灰度加权差与阈值进行比较,在边缘处达到极值的方法实现边缘检测. -------------序 一.原理性运行 流水线操作,将输入图 ...

  3. 基本SQL查询语句

    使用Emp表和Dept表完成下列练习 Emp员工表 empno ename job Mgr Hiredate Sal Comm Deptno 员工号 员工姓名 工作 上级编号 受雇日期 薪金 佣金 部 ...

  4. 2018-8-10-cant-found-Microsoft.VSSDK.BuildTools.15.0.26201

    title author date CreateTime categories cant found Microsoft.VSSDK.BuildTools.15.0.26201 lindexi 201 ...

  5. MYSQL学习笔记——连接以及存储过程

    连接 当我们需要从多个表查询数据时,我们就需要使用到连接操作,mysql支持内连接,左连接以及右连接三种连接方式. 数据库准备 首先我们创建两个表t1, t2: create table t1(i1 ...

  6. $PMTargetFileDir 参数位置

    系统/session参数与变量参数和变量都配置在Session中,如$PMTargetFileDir.$PMBadFileDir等.这些变量有哪些.在哪里定义.是否可以修改呢?在控制台(Admin C ...

  7. centos 搭建svn服务器

    1 安装svnserve yum install subversion -y 2 创建仓库 mkdir /svn/rep1 -p mkdir /svn/rep2 -p svnadmin create ...

  8. Multisim

    万用表 测量电压.电流.电阻 直流.交流 函数发生器XFG 正极.负极.公共端 可以产生正弦波.三角波和矩形波,可以设置信号参数:频率.占空比.幅度和偏移量等 示波器XSC 双通道示波器 4个连接点, ...

  9. 三栏布局的三个典型方法（圣杯、双飞翼、flex）

    聊聊三栏布局----左右定宽,中间自适应. 效果图: 圣杯布局 <!DOCTYPE html> <html> <head lang="en"> ...

  10. 数据库（一）：事务的特性与事务（在同一个 JVM 中）的传递

    参考文章 https://blog.csdn.net/shuaihj/article/details/14163713 https://blog.csdn.net/shfqbluestone/arti ...