Question

我正在创建一个包含网格布局视频的页面。这将是一个巨大的项目，所以我需要从课程访问视频持有人。我创建了新的控件，但我无法隐藏原始的html5控件。这有效：

var player = document.getElementById('vid1');
player.removeAttribute('controls');

这不是（也尝试过应用类并访问它，但没有运气）：

var player = document.getElementsByTagName('video');
player.removeAttribute('controls');

如何轻松访问所有视频持有者并隐藏控件？

谢谢！

Answer 1

document.getElementsByTagName返回页面中具有指定标记名称的元素的类数组对象。

这个类似数组的对象没有removeAttribute方法，它只是一个容器，用于保存document.getElementsByTagName调用返回的元素;类数组中的DOM对象具有removeAttribute方法。

您必须遍历类似数组并逐个删除每个属性：

＆＃13;

    var players = document.getElementsByTagName('video');
    
    for(var i = 0; i < players.length; i++) {
    players[i].removeAttribute('controls');
    }

    // the "video" HTML elements now have no "controls" attribute.
    console.log(players);

＆＃13;

<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>

＆＃13;

如果你想在1个语句中完成所有操作（我更喜欢这个，我们借用Array#map）：

＆＃13;

Array.prototype.map.call(document.getElementsByTagName("video"), function(el){
el.removeAttribute("controls");
});

＆＃13;

<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>

＆＃13;

删除多个HTML5视频的控件

1 个答案: