为什么我得到的outerNode的offsetWidth的值总是不对劲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 样式表 -->
<style>
*{
padding:0;
margin:0;
}
.outerNode{
width:505px;
height:406px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border:1px solid #a6a18d;
border-radius:8px;
box-shadow:0 0 16px #a6a18d;
}
/* 内层div */
.innerNode{
width:503px;
height:405px;
border-top:1px solid #e1d1b9;
border-left:1px solid #ceccbf;
border-right:1px solid #ceccbf;
border-radius:8px;
overflow:hidden;
}
/* 封面图 */
.topNode{
width:100%;
height:198px;
border-bottom:1px solid #787463;
background:url(../../music/pic/fmt01.jpg) center center;
background-size:cover;
}
/* 进度条 */
.lineNode{
width:100%;
height:46px;
border-top:1px solid #f9f7ee;
border-bottom:1px solid #a29d8a;
/* 背景图 */
background:url(../../musicimage/linebg.jpg) repeat-x;
}
/* 进度条 */
.progressNode{
width:440px;
height:18px;
float:left;
margin:13px 0 0 28px;
background:url(../../musicimage/progressbg.jpg) repeat-x;
position:relative;
}
/* 进度条左侧已经右侧的椭圆 */
.progressLeft{
width:7px;
height:18px;
position:absolute;
left:0;
background:url(../../musicimage/leftNode.jpg);
}
.progressRight{
width:7px;
height:18px;
position:absolute;
right:0;
background:url(../../musicimage/rightNode.jpg);
}
/* 真正的进度条 */
.trueLine{
position:absolute;
left:3px;
top:2px;
height:12px;
/* 将真正的进度条长度设置为0，播放时慢慢增加长度 */
width:0%;
background:url(../../musicimage/green_bg.png) repeat-x;
border-radius:6px;
}
/* 底部控件 */
.bottomNode{
width:100%;
height:157px;
border-top:1px solid #a29d8a;
background:url(../../musicimage/bottomBg.jpg) repeat-x;
position:relative;
}
/* 上一首按钮 */
.lastNode{
width:75px;
height:74px;
position:absolute;
left:118px;
top:39px;
background:url(../../musicimage/lastBg.png) no-repeat;
cursor:pointer;
}
/* 播放按钮 */
.playNode{
width:95px;
height:94px;
position:absolute;
background:url(../../musicimage/playNode.png) no-repeat;
left:202px;
top:29px;
cursor:pointer;
}
/* 下一首 */
.nextNode{
width:75px;
height:74px;
position:absolute;
background:url(../../musicimage/rightbg.png) no-repeat;
left:306px;
top:39px;
cursor:pointer;
}
/* 声音按钮 */
.volumeNode{
width:37px;
height:32px;
background:url(../../musicimage/volume.png) no-repeat;
position:absolute;;
right:43px;
top:58px;
}
/* 静音状态下的音频图标样式 */
.no_volumeNode{
width:37px;
height:32px;
background:url(../../musicimage/no_volume.png) no-repeat;
position:absolute;;
right:43px;
top:58px;
}
</style>
</head>
<body>
<!-- 布局 -->
<!-- 外层元素 -->
<div class="outerNode">
<!-- w内层元素 -->
<div class="innerNode">
<!-- 封面图 -->
<div class="topNode"></div>
<!-- 进度条元素 lineNode -->
<div class="lineNode">
<!-- 进度条 -->
<div class="progressNode">
<!-- 进度条左侧 -->
<div class="progressLeft"></div>
<!-- 进度条右侧 -->
<div class="progressRight"></div>
<!-- 真正的进度条 -->
<div class="trueLine"></div>
</div>
</div>
<!-- 底部控件 -->
<div class="bottomNode">
<!-- 上一首 -->
<div class="lastNode"></div>
<!-- 播放按钮 -->
<div class="playNode"></div>
<!-- 下一首 -->
<div class="nextNode"></div>
<!-- 声音 -->
<div class="volumeNode"></div>
</div>
</div>
</div>
<!-- 脚本 -->
<script>
// 用js创建音频对象
var myAudio = new Audio();
// 给音频对象一个src
myAudio.src = '../../music/mus/AcousticGuitar1.mp3'
// 谷歌浏览器不允许直接play播放，必须连和文档做交互
// myAudio.play();
var playBtn = document.querySelector('.playNode');
// 自定义开关 默认为播放
var State = true;
// 自定义音频状态 默认为有声音
var volumeState = true;
// 添加事件处理函数，点击蛋妞播放音频
playBtn.onclick = function(){
// 当点击按钮是改变state的值
State = !State;
// 判断状态是否为false，如果是false则暂停
if(State==true){
myAudio.pause();
}else{
myAudio.play();
}
};
// 设置音频按钮
var volumeNode = document.querySelector('.volumeNode');
volumeNode.onclick = function(){
// 当点击声音按钮时将声音改为反值
volumeState = !volumeState;
// 判断当前的状态如果为true则静音
if(volumeState == true){
// 将音频图标的按钮改成静音的图标
this.className = 'no_volumeNode';
myAudio.muted = true;
}else{
// 有声音的状态下还是原来的样式
this.className = 'volumeNode';
myAudio.muted = false;
}
};
// 播放时进度条的长度计算
myAudio.addEventListener('timeupdate',function(){
// 获得真正的进度条
var trueLine = document.querySelector('.trueLine');
trueLine.style.width = myAudio.currentTime / myAudio.duration * 100 + '%';
});
// 为进度条添加事件处理函数 点击进度条的某个位置就从某个位置开始播放
var progressNode = document.querySelector('.progressNode');
// 获取外层元素
var outerNode = document.querySelector('.outerNode');
// 点击假进度条元素的某个位置就让真正的进度条跳转到当前位置
progressNode.onclick = function(e){
// 兼容IE浏览器以及非IE浏览器
var ev = e || event;
// 改变真正的进度条的长度
var trueLine = document.querySelector('.trueLine');
trueLine.style.width = ( ev.clientX - ( outerNode.offsetLeft + this.offsetLeft )) / this.offsetWidth * 100 +'%';
console.log(outerNode.offsetLeft + 'outer');
console.log(this.offsetLeft + 'left');
console.log(ev.clientX)
};
</script>
</body>
</html>
正在回答
同学你好，由于设置outerNode的位置时，使用了transform属性，所以导致offsetWidth的值是获取不正确，要将样式改成如下形式：
这样offsetWidth获取到的值，才是正确的，同学试一下。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星