动态调整 div 宽度

Question

我正在尝试创建自定义 HTML5 视频滑块（看起来像带有红线的 YouTube）。由两个div层叠而成，红色div的宽度需要根据当前视频位置变化

我成功捕捉到视频位置，但无法更改红色div的宽度。我做错了什么？

HTML:

<video id="VideoWindow" src="../html/media/homepage.mp4" ontimeupdate="VideoTimeUpdated()"/>
<div id="PlaybackIndicatorProgress" style="left: 0%; width: 30%; display: block; background-color: red; height: 3px">

JS:

function VideoTimeUpdated() {
    var myVideo = document.getElementById("VideoWindow");
    var myVideoSlider = document.getElementById("PlaybackIndicatorProgress");
    var CurrentPosition;

    CurrentPosition = Math.round(parseInt(myVideo.currentTime / myVideo.duration * 100));
    CurrentPosition = CurrentPosition + '%'; 
    myVideoSlider.css("width", "CurrentPosition");
}

谢谢！

珍妮.

Answer 1

在我看来，您似乎在混合使用 jQuery 和普通 javascript，请在代码的第 8 行尝试这样做：

myVideoSlider.style.width = CurrentPosition;

说明：.css() 方法是一个 jQuery 方法，但您通过本机 getElementById( ) 方法，所以你不能使用 .css().

Dimitar 也有一部分是对的，既然你想使用一个变量，你不能将它设置成引号，否则它会被解释为一个字符串。

对于第 6 行到第 8 行，我可以说您正在投射（更改）很多 "data types" 并使用实际上不需要的舍入，如果您使用百分比作为实际可以使用的宽度浮点数。将第6、7、8行合并在一起，可以同时省下两行代码：

myVideoSlider.style.width = (myVideo.currentTime / myVideo.duration * 100) + "%";

请注意，我将计算放在括号中以将它们与连接（+ 号）分开，否则如果您阅读代码可能不清楚这里发生了什么，因为在 javascript 中加号是用于根据您使用的 "data types" 计算和连接字符串。

Answer 2

CurrentPosition 需要在 "" 之外，因为你的方式 "CurrentPosition" 只是一个字符串，而不是变量。

应该是myVideoSlider.css("width", CurrentPosition);

动态调整 div 宽度

Dynamically resizing div width

html

javascript

resize

dynamic