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 ...
随机推荐
- python字符串中的转义符
python字符串中的转义符 1,单引号,双引号,三引号 a='www.96net.com.cn',b="96net.com.cn",c="""96n ...
- IMAP协议学习笔记（一）
IMAP IMAP(Internet Mail Access Protocol,Internet邮件访问协议)以前称作交互邮件访问协议(Interactive Mail Access Protocol ...
- java 进销存管理 商户管理 库存管理 springmvc SSM 项目源码
统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3 SSM 普 ...
- JQ的简单使用（基础）——————JQ
JQ基础--JQ的简单使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...
- 2018-8-10-调试-ms-源代码
title author date CreateTime categories 调试 ms 源代码 lindexi 2018-08-10 19:17:19 +0800 2018-2-13 17:23: ...
- Rsync+inotify 实时数据同步 inotify master 端的配置
强大的,细致的,异步的文件系统事件监控机制.Linux 内科从 2.6.13 起支持 inotify Inotify 实现的几款软件:Inotify,sersync,lsyncd ※Inotify 实 ...
- selenium鼠标悬停失效，用js语句模拟
写脚本时,有很多case需要要用的鼠标悬停出菜单 用到了ActionChains(self.driver).move_to_element(el).perform(),但是脚本写完以后,单个case执 ...
- 获取服务进程server.exe的pid（0号崩溃）
#include "stdafx.h" #include <windows.h> #include <iostream> #include <COMD ...
- shell getopts用法详解
本文链接:https://blog.csdn.net/u012703795/article/details/46124519 获取UNIX类型的选项: unix有一个优点就是标准UNIX命令在执行时都 ...
- CentOS 6.3下Zabbix监控MySQL数据库参数
系统环境:CentOS 6.3 x64 http://www.linuxidc.com/Linux/2012-12/76583.htm mysql: mysql-5.6.10 http://w ...