HTML5类操作
2024-08-21 21:26:32
一、获取DOM的方式
①通过类名获取元素,以伪数组形式存在
document.getElementsByClassName("class");
②通过css选择器获取元素,符合匹配条件的第1个元素
document.querySelector("selector");
③通过css选择器获取元素,以伪数组形式存在
document.querySelectorAll("selector");
二、jQuery操作类的方法(参考文章jQuery相关方法2)
①增加 addClass( )
②删除 removeClass( )
③切换 toggleClass( )
④判断 hasClass( )
三、HTML5操作类的方法(通过classList这个对象调用方法,classList获取的是这个DOM元素上的所有class)
①增加一个类样式 dom.classList.add( )
②删除一个类样式 dom.classList.remove( )
③切换类样式dom.classList.toggle( )
④判断类样式是否存在 dom.classList.contains( )
注意:这些方法更多的运用于移动端,在移动端,jQuery的方法使用的更少(杀鸡焉用牛刀!)
四、案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5类操作</title>
<style>
ul{
list-style: none;
}
li{
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
background: black;
float: left;
cursor: pointer;
}
li.active{
background: red;
}
</style>
</head>
<body>
<ul>
<li>菜单1</li>
<li class="active">菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<script>
window.onload=function(){
// 切换当前样式的效果
document.querySelector("ul").onclick=function(e){
// 当前的li
var currentLi=e.target;
//如果已经被选中,程序停止
if(currentLi.classList.contains("active")) return false;
// 如果没有被选中,之前的去除,再给当前的加上
document.querySelector("li.active").classList.remove("active");
currentLi.classList.add("active");
}
}
</script>
</body>
</html>
最新文章
- 【无私分享:ASP.NET CORE 项目实战(第三章)】EntityFramework下领域驱动设计的应用
- Linux学习笔记(15)-信号量
- T-SQL 语句的理解
- [android]如何使LinearLayout布局从右向左水平排列,而不是从左向右排列
- 用Zim替代org-mode?
- js页面跳转整理(转载未整理)
- pl/sql tutorial
- [AngularJS] Using ngModel in Custom Directives
- HDU OJ 5441 Travel 2015online E
- Android学习之旅-android系统服务的启动过程以及分类(90)
- Unable to find remote helper for &#39;https&#39;
- 封装cookie设置和获取的简易方法
- 基于WebGL架构的3D可视化平台—新风系统演示
- ip网关配置
- luoguP4000 斐波那契数列
- UI5-文档-4.18-Icons
- oracle数据库查询日期sql语句(范例)、向已经建好的表格中添加一列属性并向该列添加数值、删除某一列的数据(一整列)
- 解决SurfaceView调用setZOrderOnTop(true)遮挡其他控件
- 第十篇:Linux中权限的再讨论( 上 )
- ssh认证