我有以下代码（取自 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>
1 回答
撒科打诨
TA贡献1934条经验 获得超2个赞
style呈现所选元素的内联样式
如果你想获取CSS值，你需要获取计算的样式，使用getComputedStyle
在应用活动样式表并解析这些值可能包含的任何基本计算之后，该
Window.getComputedStyle()方法返回一个包含元素的所有 CSS 属性值的对象
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
console.log(getComputedStyle(bar).height);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Speed Scrubber</title>
<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>
</head>
<body>
<div class="wrapper">
<video class="flex" width="765" height="430" src="//clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
<div class="speed">
<div class="speed-bar">1×</div>
</div>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消