如何选择具有 ID 的元素的子元素来添加或删除属性？

Question

我有一种情况，我想从视频元素添加/删除属性以根据视口显示不同的视频。您可能都知道，仅使用“display: none”来不在移动设备上加载视频是不够的。就我而言，我想在移动设备上加载不同的背景视频。我的问题是，我无法编辑该视频的 ID 或类，只能编辑父元素，在本例中是一个部分。

给定某个视口，假设低于 900px，我想从所述视频元素中删除自动播放属性。它可能看起来像这样：

    window.onload = addAutoplay();
    var videoLocation  = document.firstElementChild("video-section-desktop");
    function addAutoplay() {
        if(window.innerWidth <992){
            videoLocation.removeAttribute("autoplay");
      };
    }

在这种情况下，检查代码如下所示：

<div id="video-section-desktop"><video src="..." loop autoplay muted playsinline></video></div>

我的 JS 代码只能选择父元素，但不能选择子元素（又名视频元素），并且我所有修改代码的尝试都没有得到有效的解决方案。我只熟悉 HTML 和 CSS。 JS 对我来说很新鲜。

提前感谢您和亲切的问候！

---

通过JS更改子元素（视频）的属性，否则我无法编辑

Answer 1

首先，当您调用

autoplay()

函数时，您会面临一个问题，因为这些函数是在

window.onload

上定义变量之前调用的，并且实际上需要变量

videoLocation

才能应用

removeAttribute("autoplay")

当您在

undefined

值上调用方法时，这会导致错误。

为了选择视频的父元素，您尝试使用

firstElementChild

，它实际上不是一个函数，它只是一个实际上应该在父元素节点上使用来访问视频的属性，您可以这样做：

因此这将获取视频的父元素：

document.getElementById("video-section-desktop")

虽然这将获取视频本身以应用您的功能：

document.getElementById("video-section-desktop").firstElementChild;

此外，对于

autoplay

chrome 浏览器中的视频，建议将

muted

属性添加到

video

标签，以确保它能够自动播放，否则可能无法按照 MDN 的预期工作：https://developer。 mozilla.org/en-US/docs/Web/Media/Autoplay_guide

因此您的功能在调整后应该可以正常工作：

HTML：

<div id="video-section-desktop">
     <video src="video.mp4" autoplay muted></video>
</div>

Javascript：

const videoLocation = document.getElementById("video-section-desktop").firstElementChild;

    window.onload = addAutoplay();

    function addAutoplay() {
        if (window.innerWidth < 992) {
            videoLocation.removeAttribute("autoplay");
        }
    }

我希望这就是您正在寻找的内容，并且希望它对您有所帮助。