<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 300px;
height: 100px;
margin:10px auto;
border: 1px solid #000;
}
.active{
border-radius: 50%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box box1 "></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<button>切换</button>
<script>
var box1=document.querySelector('.box1');
// box1.className="";
// juqery
// addClass() removeClass() hasClass() toggleClass();
// h5新增的操作类名的方式 和jq一样好用
// 获取第一个盒子
var box1= document.querySelector(".box1");
// 添加类名
box1.classList.add('active')
// alert('ok');
// 删除类名
// box1.classList.remove('active');
// contains:包含
// 判断是否包含某个类名 返回结果 true/false
// contains 包含 contains 包含 list清单 classlist类名清单
// 判断box1的类名是否包含 active 返回结果为bool类型
var f=box1.classList.contains('active');
console.log(f);
// 切换类名
// 获取button元素 并且绑定点击事件
document.querySelector('button').οnclick=function(){
// 判断 是否有 active属性 有的话就添加 没有就删除
document.querySelector('.box3').classList.toggle('active');
}
//
//---------------------自定义属性---------------------------------
<!-- 给标签添加自定义属性 必须以data-开头 -->
<div class="box" title="盒子" data-my-name="zs" data-content="我是一个div">div</div>
<!-- made-in-china-->
<script>
var box=document.querySelector('.box');
// js里面的自定义属性
// box.index=100;
// console.log(box.className);
// console.log(box.title);
// 如何获取标签的自定义属性
// console.log(box.dataname);
// 自定义的属性 需要通过 dateset[]方式来获取
// console.log(box.dataset['content']);
// 设置自定义属性的值
var num=100;
num.index=10;
box.index=100;
box.dataset['content']='aaaa';
// data-my-name="zs" 如何获取
console.log(box.dataset['myName']);
</script>
</body>
</html>
html5-类名的操作-属性
最新推荐文章于 2023-01-04 22:47:13 发布