HTML5-Classlist样式操作
<!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样式操作的更多相关文章
- 深入学习jQuery样式操作
× 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作 前面的话 使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）
DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...
- 解密jQuery内核 样式操作
基础回顾 jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的,本章通一下分解探究下jquery里这部分代码的实现 那么jQuery要处理样式的哪些问题? 先简单回顾下样式操作会遇到 ...
- jQuery 2.0.3 源码分析 样式操作
根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...
- JQuery_元素样式操作
元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握. 一.css()方法 ...
- JavaScipt 样式操作
我们知道HTML样式定义的三种方式: <link/>外部引入也就是定义 CSS 中的 <style/>嵌入式样式 style特性地定义 给一个HTML元素设置css属性,如: ...
- DOM样式操作
CSS 到 DOM的抽象 通过操作 CSS 对应的 DOM对象来更新CSS样式 换肤操作 如何获取实际的样式(不仅有行内,更有页面和外联样式表中定义的样式) 样式表分为三类: 外联,页面,行内 内部样 ...
- jQuery - 5.样式操作
样式操作 1.获取样式 attr("class"), 2.设置样式attr("class","myclass"), 3.追加样式addCla ...
随机推荐
- JEECG 深度使用培训班 周六周日公开课（一期班）
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhangdaiscott/article/details/25411023 广大技术爱好者: ...
- node中使用log4js4.x版本记录
const log4js = require('log4js'); log4js.configure({ appenders: { logFile: { //文件形式打印日志 type: " ...
- Opencv中KNN背景分割器
背景分割器BackgroundSubtractor是专门用来视频分析的,会对视频中的每一帧进行"学习",比较,计算阴影,排除检测图像的阴影区域,按照时间推移的方法提高运动分析的结果 ...
- Docker实战部署应用——Tomcat
Tomcat 部署 拉取tomcat镜像 docker pull tomcat:8 创建tomcat容器 创建tomcat容器用于 Web应用,并且进行目录映射 docker run -id --na ...
- 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 ...
- 三、ARM 寄存器及异常处理
3.1 ARM 内部寄存器 ARM920T 总共有 37 个寄存器,其中 31 通用 32 位寄存器和 6 个状态寄存器,但不能在同一时刻对所有的寄存器可见.处理器状态和运行模式决定了哪些寄存器对程序 ...
- ArrayUtils工具类更加方便的操作数据
不废话,上代码: package com.jxd; import org.apache.commons.lang3.ArrayUtils; public class TestArr { /** * A ...
- Spring如何解决循环依赖问题
目录 1. 什么是循环依赖? 2. 怎么检测是否存在循环依赖 3. Spring怎么解决循环依赖 本文主要是分析Spring bean的循环依赖,以及Spring的解决方式. 通过这种解决方式,我们可 ...
- 如何分析及处理 Flink 反压？
反压(backpressure)是实时计算应用开发中,特别是流式计算中,十分常见的问题.反压意味着数据管道中某个节点成为瓶颈,处理速率跟不上上游发送数据的速率,而需要对上游进行限速.由于实时计算应用通 ...
- OC + RAC (八) 查看信号状态和跳过信号
-(void)_test9{ /// RACCommand又叫命令 是用来收发数据的 监听按钮点击,网络请求.... RACCommand * command = [[RACCommand alloc ...