首页 > 其他分享> > 10.29

10.29

2021-11-01 08:31:47 作者：互联网

一、什么是HTML5(html+js+css)?
HTML的第五个版本，有新的元素、属性、行为；

二、HTML的优势？
（1）跨平台：唯一一个通吃PC、IPhone、Android等主流平台的跨平台语言；
（2）特效：（canvas、svg）
（3）注重用户体验：（Echarts、highchart）
（4）提供了很多API接口

HTML5拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，拖放是标准的一部分，任何元素都能拖放；

1、开启拖放【draggable】
将要拖放的对象元素的draggable属性设置为true，任何元素均可实现拖放，img和a元素(有href)默认允许拖放；

2、拖放相关的事件

3、dataTransfer对象

HTML5新增方法
1、ClassList
classlist方法可以获取到这个dom元素的类的对象，但是目前classlist属性只有火狐3.6+、谷歌支持；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>classlist属性</title>
<style>
#app{border: 1px solid red; width:400px;height: 400px;}
#app.add_color{background-color: green;}
#app.add_color1{background-color: pink;}
#app.aa{background-color: yellow;}
</style>
</head>
<body>
<div id="app"></div><br/>
<input type="button" value="增加">
<input type="button" value="删除">
<input type="button" value="获取">
<input type="button" value="判断">
<input type="button" value="切换">
<input type="button" value="替换">
<script>
//获取节点
var box = document.getElementById("app");
var skill = document.querySelectorAll('input');
console.log(skill);
skill[0].onclick=function(){
// console.log("增加了");
//添加一个或多个如果值已经存在就不添加了
box.classList.add("add_color","add_color1");
}
skill[1].onclick=function(){
//删除一个或多个
box.classList.remove("add_color1");
}
skill[2].onclick=function(){
//获取类的数量
console.log(box.classList.length);
}
skill[3].onclick=function(){
//判断有没有包含add_color这个类有是true 否则是false
var a = box.classList.contains("add_color");
console.log(a);
}
skill[4].onclick=function(){
//切换有则删除无则添加
box.classList.toggle("add_color1");
}
skill[5].onclick=function(){
//替换接收俩个参数
box.classList.replace("add_color1","aa");
}
</script>
</body>
</html>
2、dataSet【自定义数据属性】
（1）HTMLElement.dataset 属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-)集。
（2）所谓的data-实际上就是data-前缀加上自定义属性名；但是在获取或者添加自定义属性的时候要去掉前缀data-;

（3）getAttribute和setAttribute及dataset的区别？
1、共同点：两者都将属性设置在attribute上，也就是说getAttribute和setAttribute获取dataset的内容，dataset的内容只是attribute的子级；
2、不同点：命名上不同，dataset内只有带data-前缀的属性；

（4）那么为什么还要使用data-呢？
我们可以把所有自定义的属性在dataset对象中统一管理，遍历什么的都很方便；然而setAttribute设置的值需要一个个进行获取；

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义属性</title>
<style>
[data-set-css]{
background-color: #33CCFF;
width: 200px;height: 200px;
}
</style>
</head>
<body>

<div id="divName" data-uname="xiaoxiao" data-zhuiMeng="追梦" data-je-ffrey="jeffrey">点击我</div>
<script>
//获取divName
var el = document.getElementById("divName");
console.log(el.dataset);
//添加一个自定义属性
el.dataset.sex="女"
//el.dataset.data-usex="cs" 错误写法
//获取数据
console.log('data-uanme',el.dataset.uname);
//区分大小写只识别小写
console.log('data-zhuiMeng',el.dataset.zhuimeng);
//连着的字符需要转换为驼峰命名
console.log('data-je-ffrey',el.dataset.jeFfrey);

el.dataset.setCss = "设置css样式";
console.log('setCss',el.dataset['set-css']);
//删除数据
delete el.dataset.uname
delete el.dataset['setCss']

el.setAttribute('age','18');
el.setAttribute('data-age','118');

//getAttribute取值
console.log(el.getAttribute('age'));
console.log('data-age',el.getAttribute('data-age'));
console.log('data-age',el.getAttribute('data.sex'));
</script>
</body>

标签：el,console,log,10.29,dataset,data,拖放
来源： https://www.cnblogs.com/cx0109/p/15491934.html