javascript - 无法通过javascript更改html属性

Question

这很奇怪，我通过 document.getElementsByTag('video') 获取视频我无法更改它们的宽度或任何其他值。

这是我正在使用的 Javascript 代码 -

window.onload = function() {

            this.videos = document.getElementsByTagName('video');

            var self = this;
            for(var i=0;i<videos.length;i++) {
                videos.item(i).addEventListener("loadedmetadata", 
                    (function(index){
                        return function() {
                            console.log(self.videos[index].offsetWidth); //shows X
                            self.videos[index].offsetWidth = "480";
                            console.log(self.videos[index].offsetWidth); //shows X
                        }
                    })(i)
                );
            }
        }

示例 <video>标签-

<video><source src="videos/video_1.mp4" type="video/mp4"></video>

我不知道发生了什么，我从来没有遇到过这样的问题。 谢谢

编辑: 使用 setAttribute 函数只是将其添加到实时 html 中，但大小并没有真正改变

Answer 1

The offsetWidth is a read-only DOM property所以你不能更新它。但是为什么不改变 元素 width 呢？

window.onload = function() {
  this.videos = document.getElementsByTagName('video');
  var self = this;
  for(var i=0;i<videos.length;i++) {
    videos.item(i).addEventListener("loadedmetadata", 
      (function(index){
        return function() {
        self.videos[index].width = "480";
      }
    })(i));
  }
}

您可以考虑边框、内边距、边距...