H5 操作class 类样式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" media="screen">
.red {
color: red;
} .underline {
text-decoration: underline;
} .blue {
color: blue;
}
</style>
</head> <body>
<ul>
<li>听说白雪公主在逃跑</li>
<li class="blue">小红帽在担心大灰狼</li>
<li>听说疯帽喜欢爱丽丝</li>
<li>丑小鸭会变成白天鹅</li>
</ul>
<input type="button" value="为第一个元素添加样式" id="add">
<input type="button" value="为第二个元素移除样式" id="remove">
<input type="button" value="为第三个元素切换样式" id="toggle">
<input type="button" value="判断第四个元素是否包含样式" id="contain">
<script>
window.onload = function () {
// querySelector:返回文档中匹配指定的CSS选择器的第一元素
// querySelectorAll:返回文档中匹配的CSS选择器的所有元素节点列表 // add:为元素添加指定名称的样式，一次只能添加一个样式
document.querySelector("#add").onclick = function () {
// classList：当前元素的所有样式列表-数组
document.querySelector("li").classList.add("red");
document.querySelector("li").classList.add("underline");
} // 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("red");
} // contains：判断元素是否包含指定名称的样式，返回true/false
document.querySelector("#contain").onclick = function () {
var isContain = document.querySelectorAll("li")[3].classList.contains("red");
alert(isContain)
} }
</script> </body> </html>
H5 操作class 类样式的更多相关文章
- jQuery 源码分析(十四) 数据操作模块 类样式操作 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...
- jQuery对标签、类样式、值、文档、DOM对象的操作
jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...
- Win32编程：窗口类样式+窗口外观样式+窗口显示样式
1.窗口类样式WNDCLASS.style CS_VREDRAW 提供窗口位置变化事件和高度变化事件的处理程序,功能是重绘窗口 CS_HREDRAW 提供窗口位置变化事件和宽度变化事件的处理程序,功能 ...
- JavaScript(第二十天)【DOM操作表格及样式】
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...
- JavaScript--DOM操作表格及样式(21)
一 操作表格 // <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = d ...
- jQuery----操作类样式（依托开关灯案例）
在网页开发中,元素的样式可以在style标签中定义,但是有很多案例需要添加类样式或者删除类样式,可以获取元素调用css()方法改变元素样式,但是这种方法很繁杂,本文利用开关灯案例,小结使用jquery ...
- JavaScript--Dom操作元素的样式
在前端开发中,有时候需要动态修改的网页元素的样式,这里将使用JS动态修改元素样式的方法做个小结: 网页结构: 按钮: 标签:input 类型:button id:btn ...
- IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件
IIS 配置 FTP 网站 在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...
- XML格式示例 与 XML操作(读取)类封装
header('Content-Type: text/xml'); <?xml version="1.0" encoding="utf-8" standa ...
随机推荐
- 【JZOJ4763】【NOIP2016提高A组模拟9.7】旷野大计算
题目描述 输入 输出 样例输入 5 5 9 8 7 8 9 1 2 3 4 4 4 1 4 2 4 样例输出 9 8 8 16 16 数据范围 解法 离线莫队做法 考虑使用莫队,但由于在删数的时候难以 ...
- 用五种不同的布局方式实现“左右300px中间自适应”的效果
float浮动 <section class="layout float"> <style media="screen"> .layou ...
- Leetcode733.Flood Fill图像渲染
有一幅以二维整数数组表示的图画,每一个整数表示该图画的像素值大小,数值在 0 到 65535 之间. 给你一个坐标 (sr, sc) 表示图像渲染开始的像素值(行 ,列)和一个新的颜色值 newCol ...
- 开发ArcEngine时的一个提示，无效位图，无法在类“***”中找到资源“***.bmp”
解决办法:文件属性-生成操作 修改为 :嵌入式资源.
- myeclipse的最有用的设置
1 取消Myeclipse的自动文件验证(卡傻的原因) Windows –> Perferences –>Myeclipse –> Validation,保留manual(手动) ...
- 2019-9-2-win10-uwp-右击浮出窗在点击位置
title author date CreateTime categories win10 uwp 右击浮出窗在点击位置 lindexi 2019-09-02 12:57:38 +0800 2018- ...
- 洛谷 P4114 Qtree1 树链剖分
目录 题面 题目链接 题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例: 输出样例: 说明 说明 思路 Change Query AC代码 总结 题面 题目链接 P4114 Qt ...
- du,df区别
1.记住命令 du:disk Usage -h, --human-readable print sizes in human readable format df:disk free 2.区别 du ...
- python 布尔型（bool）
- @bzoj - 4378@ [POI2015] Pustynia
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个长度为 n 的正整数序列 a,每个数都在 1 到 10^ ...