元素在开发人员工具中显示为已删除，但仍以可视方式显示在页面中答案

【问题标题】：Element shows as removed in developer tools, but is still present visually in the page元素在开发人员工具中显示为已删除，但仍以可视方式显示在页面中
【发布时间】：2025-12-01 05:25:01
【问题描述】：

我有一个 Brightcove 播放器，我想在播放器暂停时将播放按钮更改为暂停按钮。

这是播放器：

<div style=\"position: relative; display: block; max-width: 1515px;\"><div style=\"padding-top: 50.77574047954866%;\"><video id=\"myPlayerID3\" ' +
            ' data-video-id=\"' + data3.videoId + '\" ' +
            ' data-account=\"' + data3.accountId + '\" ' +
            ' data-player=\"' + data3.playerId + '\" ' +
            ' data-embed=\"default\" class=\"video-js\" ' +
            ' controls></video>

这是按钮的样式：

    #myPlayerID3 .vjs-big-play-button {
        display: block;
        background: url(myurl) 25% center/contain no-repeat;
        right:0px;
        left:10%;
        top:68%;
        bottom:0;
        position:absolute;
        border-radius: 0;
        width:10%;
        height: 12%;
    }

这是处理暂停事件的代码：

$(document).ready(function() {
    var artist_video = document.querySelector("#artist_video");
    var artist_video_play_button = artist_video.querySelector(".vjs-big-play-button")
    videojs.getPlayer('myPlayerID3').on('pause',function(){
    artist_video_play_button.style.background = "url(myurl) 25% center/contain no-repeat";
    });

当播放器暂停时，代码会正常触发，但会发生这种情况：

暂停按钮出现，但播放按钮并未消失。如果我在开发者工具中查看样式，可以看到“播放”图片被标记为删除线（#myPlayerID3 的背景属性），但在页面中仍然可见：

如果我在开发人员工具中取消选中背景样式的复选框，它就会消失。这是渲染的东西吗？

我试过去掉这样的样式

artist_video_play_button.removeAttribute("style");

或者像这样

artist_video_play_button.style.background = null;

但是没有用

【问题讨论】：

不要通过JS改变图片，而是在css中尝试。即在暂停时，将一个类添加到 .vjs-big-play-button 并在 css 中将背景图像添加到该类。看看是否有效
我只是在暂停时这样做了：artist_video_play_button.classList.add("paused"); 和 .paused 类只有这种 css 样式：.paused { background: url(myurl) 25% center/contain no-repeat}。那没起效。这一次，连暂停键都没有出现
在开发工具中，你能看到“暂停”类的值吗？
我实际上没有。我没有看到在播放按钮元素中添加了这个类。
即使我这样做 artist_video_play_button.remove(); 元素仍然存在，它不会被删除

标签： javascript css brightcove

【解决方案1】：

问题在于，brightcove 在页面中转储 HTML 代码时会生成一个按钮，并且该按钮采用 div 的类（它也充当按钮），因此它是样式。解决方案是在 Brightcove 生成它的 HTML 内容之后完全删除该按钮，这意味着在 $(document).ready(function() =>{})

最后我们决定放弃 brightcove 并改用 CDN 和简单的 HTML5 video 标签，因为 Brightcove 在页面呈现时生成 HTML 代码的概念引入了大量的自定义问题

【讨论】：