<!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. asp.net 几种传值方法的分析

    本文转自:http://www.cnblogs.com/shengtianlong/archive/2010/08/11/1797608.html ASP.NET页面传值方法的优缺点及适用范围 1. ...

  2. Could not load file or assembly system.data.sqlite.dll or one for it's depedencies

    最近做一个winform项目,因为数据库用的表很少,所以用的是轻量级数据库sqlite.sqlite的优点很多,但是他要分两个版本,32位或者64位,不能同时兼容. 我遇到的问题是,我在开发端用的是. ...

  3. FCKeditor用在JSP中的几点注意事项

    转自:https://blog.csdn.net/asinzy/article/details/3854127 本篇文章主要介绍了"FCKeditor用在JSP中的几点注意事项", ...

  4. C#/.NET VS2017+ EF+SQLite.CodeFirst——真正实现CodeFirst

    本文所介绍的是真正的EF+CodeFirst,不需要提前建表,由代码自动生成! 进行前需要准备的: 1.下载Sqlite Experthttp://www.sqliteexpert.com/downl ...

  5. 网络拓扑_VLAN与Trunk配置

    实验目的: 1.实现VLAN10的两台主机互通; VLAN20的两台主机互通; 2.VLAN10与VLAN20主机不能互通. 拓扑图: 步骤: 1.依图配置PC1,PC2,PC3,PC4的IP,掩码, ...

  6. Codeforces Round #425 (Div. 2) - B

    题目链接:http://codeforces.com/contest/832/problem/B 题意:给定一个好字母集合(只有小写字母,除了这些外其余都是坏字母集合),给定一个匹配模式串, 模式串只 ...

  7. uboot tag存储主要部分代码

    https://www.cnblogs.com/pokerface/p/5217106.html     cmd_bootm.c //传递给内核的参数      int do_bootm (cmd_t ...

  8. shell 操作mysql

    1.连接 #!/bin/bash user="root" password="XXXXXX" sql = `mysql -u>/dev/null use ...

  9. 关于pug的笔记

    一.简介 Pug 是一款健壮.灵活.功能丰富的模板引擎,专门为 Node.js 平台开发.Pug 是由 Jade 改名而来,他可以帮助我们写html的时候更加的简单明了.安装.使用pug的过程打开cm ...

  10. 每次当浏览到网页,点击tab标签又回到顶部去了！

    通常tab的标签使用a链接,而a链接的href值为#,这是一个锚点的属性,因此他会跳转到网页的顶端.如果你的tab包含一个id=tab,也可以设置为href="#tab"这样他就会 ...