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));
  }
}

您可以考虑边框，填充，边距......

Answer 2

请注意，您将三种内容合并为一种不同之处：

HTML 属性
DOM 属性
CSS 样式

这是一个HTML 属性： <a href="http://example.com"></a>

如果您有一个表示HTML标记的DOM元素，您可以像这样修改属性：

var a = document.createElement('a')
a.setAttribute('href', "http://example.com")

这是一个DOM 属性：

var a = document.createElement('a')
a.href = "http://example.com"

请注意DOM 属性如何可以类似地命名为HTML 属性，但它们不是同一个东西。通常，更改HTML 属性将修改相应的DOM 属性，但反之亦然。此外，并非所有属性都具有匹配的属性，依此类推。

通过DOM 属性样式（对应于HTML 属性样式，但对应HTML 属性）访问CSS 样式 style是一个字符串，DOM 属性是一个对象）：

var a = document.createElement('a');
a.style.width = "500px";
a.style.height = "20%";

有HTML 属性＆＃34;宽度＆＃34;和＆＃34; height＆＃34;，但不推荐使用它们以支持使用样式。另外，＆＃34;宽度＆＃34;和＆＃34;身高＆＃34;因为HTML属性只能是表示像素的数值 - 而CSS样式可以是许多变体（像素，ems，百分比等）

在您的特定情况下，只需修改元素的宽度样式以更改其宽度。

您的代码中的另一件事是this和self的使用，这是完全不需要的。 this.videos无缘无故地在全局对象（窗口）上设置属性。您还可以使用.bind（）：

来避免关闭索引属性

window.onload = function() {
    var videos = document.getElementsByTagName('video');
    for (var i = 0; i < videos.length;i++) {
        var video = videos.item(i);
        video.addEventListener("loadedmetadata", (function () {
            console.log(this.offsetWidth);
            this.style.width = "480px";
            console.log(this.offsetWidth);
        }).bind(video));
    }
}

Answer 3

尝试使用getAttribute和setAttribute，如videos[index].setAttribute('offsetWidth', 480)

Answer 4

首先，这似乎不对：

for(var i=0;i<videos.length;i++) {

不应该是self.videos吗？解决了这个问题。

然后，要更改视频大小，您可以更改元素的大小：

self.videos[index].width = "480";

或更好的CSS宽度：

self.videos[index].style.width = "480px";

视频本身的大小将自动扩展到视频元素的大小。

无法通过javascript更改html属性

4 个答案: