javascript - 无法使用setAttribute动态改变audio标签的音量
本文介绍了javascript - 无法使用setAttribute动态改变audio标签的音量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="styleFile.css" />
<head>
<meta charset="UTF-8">
<title>Dear Js</title>
</head>
<body>
<p id="timer"></p>
<a id="volumeChangeLink">
<img id="speakerImage" src="images/volumeWhite3.png" />
</a>
<audio id="rainAudio" src="rain.m4a" autoplay="autoplay" >
</audio>
<script src="test.js"></script>
</body>
</html>
经过探究我发现我只能使用document.getElementById("rainAudio").volume = 我想要的音量大小;来改变音量而不能使用document.getElementById("rainAudio").setAttribute("volume", "我想要的音量大小");来改变, 这是为什么呢?
解决方案
HTML中属性有分两种：标签属性（attribute）、DOM属性（property）
标签属性（attribute）
attribute可以说是HTML标签的特性，attribute可以通过getAttribute和setAttribute进行获取或修改。
<audio id="rainAudio" src="rain.m4a" autoplay="autoplay" >这里id和src是HTML标签<audio>的特性。
DOM属性（property）
property就是一个属性，如果把DOM元素看成是一个普通的Object对象，那么property可以通过对象访问属性的方式.来修改或获取。
document.getElementById("rainAudio").volume = "我想要的音量大小";这里volume是audioDOM对象的属性。
audio
w3school Audio 标签介绍
w3school Audio DOM对象介绍
通过上面2个详细介绍链接可发现，<audio>所有的标签属性中并没有volume，而volume是DOM对象属性。
这篇关于javascript - 无法使用setAttribute动态改变audio标签的音量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
