我有以下代码（取自 Wes Bos）。虽然元素的高度是在 CSS 中指定的，但当我尝试从 JS 访问它时，它不会出现。当我编写console.log(bar.style.height)时，它返回空字符串（请参见下面的代码）。我尝试寻找其他方法来访问该值，但没有成功。我发现的唯一方法是在 JS 中显式设置它。有谁知道如何解决这个问题？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Speed Scrubber</title>
</head>
<body>
<div class="wrapper">
<video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
<div class="speed">
<div class="speed-bar">1×</div>
</div>
</div>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #4C4C4C url('https://unsplash.it/1500/900?image=1021');
background-size: cover;
font-family: sans-serif;
}
.wrapper {
width: 850px;
display: flex;
}
video {
box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);
}
.speed {
background: #efefef;
flex: 1;
display: flex;
align-items: flex-start;
margin: 10px;
border-radius: 50px;
box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.speed-bar {
width: 100%;
background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
color: white;
height: 16.3%;
}
</style>
<script>
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
console.log(bar.style.height);
</script>
</body>
</html>
撒科打诨
相关分类