javascript - 根据宽度移动元素位置

Question

我试图让下面的 iframe 向上移动到一个相对负的位置，移动量与宽度成正比。

<iframe id="fullwidthvideo" width="560" height="315" src="https://www.youtube-nocookie.com/embed/uV33h4f1E1s?rel=0&controls=0&showinfo=0&autohide=1&autoplay=1&loop=1&playlist=uV33h4f1E1s" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript">
   document.getElementById('fullwidthvideo').onload = function() {
   vidElement = document.getElementById('fullwidthvideo');
   vidElement.style.top = vidElement.width * -0.25;
   }
</script>

iframe 元素的这个 CSS 有效，所以我只是想弄清楚如何使用 JavaScript 使其动态化。

top: -200px;

我不确定发生了什么，因为 JavaScript 似乎正在计算 0 值。任何帮助将不胜感激。 :)

Answer 1

我认为以下行是导致问题的原因:

vidElement.style.top = vidElement.style.width * -0.25;

在处理 iframe 时，我不使用 style.width，而是像这样只使用宽度:

vidElement.style.top = vidElement.width * -0.25;

希望对您有所帮助!