HTML5的音频、视频，自定义属性，类操作

最新推荐文章于 2023-05-21 23:39:21 发布

@hxl

最新推荐文章于 2023-05-21 23:39:21 发布

阅读量549

点赞数

本文链接：https://blog.csdn.net/qq_38105960/article/details/100527852

版权

音频（audio）和视频（video）
audio video
常用属性：
controls------显示控制条
autoplay------自动播放
loop---- 循环播放如果这个属性不写默认播放一次 loop 或者 loop = “loop” 表示无限循环

多浏览器支持的方案：
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

新增获取元素的方法

1. document.querySelector(“CSS选择器”)
2. document.querySelectorAll(“CSS选择器”)

注意

document.querySelector()只能获取匹配的第一个元素对象。
document.querySelectorAll()返回的一个伪数组。即使匹配的只一个了只能用该document.querySelectorAll()[0]方式得到元素。

操作元素的类
jquery操作类：addClass() removeClass() toggleClass() hasClass()

h5的类操作基于classList这个属性。

node.classList.add('类名')----添加
node.classList.remove('类名')----移除
node.classList.toggle('类名')----切换
node.classList.contains('类名')----是否包含改类，true有，false无

注意：jquery最大的特点就是封装了大量的兼容性问题，在移动端的浏览器一般需要兼容，不需要用jquery，把他放在移动端过于臃肿。
移动端有类似与jquery的轻量级库：zepto.js

自定义属性

元素的属性名必须是 data-xxx的形式(必须以 data- 开头)
1.例如：<div data-school='itcast'></div>
获取 dataset['school']

如下格式设置时，以驼峰格式获取

2.例如：<div data-school-name='itcast'></div>
获取 dataset['schoolName']

<body>
<div class="box" data-name="aaaa" data-id="1" data-name-user="bbb">哈哈哈哈哈哈</div>
<script>
    //jquery:attr()
    //H5自定义属性操作，基于dataset属性
    //创建自定义属性 data-*='属性值';
    //获取 对象.dataset
    //作用：存储数据

    //注意：html：data-name-user  js:要使用驼峰命名方式 nameUser
    var box=document.querySelector('.box');

    console.log(box.dataset);//DOMStringMap {name: "aaaa", id: "1"}

    //1.获取对应的属性值
    console.log(box.dataset.name);
    console.log(box.dataset['name']);
    console.log(box.dataset['nameUser']);

    //2.设置属性
    box.dataset.age='20';

    // jquey方式获取
    // console.log($('.box').attr('data-name'));
    // console.log($('.box').data('name'));
    
</script>

@hxl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5的音频、视频，自定义属性，类操作

音频（audio）和视频（video）audio video常用属性：controls------显示控制条autoplay------自动播放loop---- 循环播放如果这个属性不写默认播放一次 loop 或者 loop = “loop” 表示无限循环多浏览器支持的方案：<source> 标签允许您规定可替换的视频/音频文件供...
复制链接

扫一扫