元素在开发人员工具中显示为已删除，但在页面中仍然可见

Question

我有一个 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";
    });

播放器暂停时代码可以正常触发，但会发生以下情况：

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

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

我试过删除这样的样式

artist_video_play_button.removeAttribute("style");

或者像这样

artist_video_play_button.style.background = null;

但是没用

Answer 1

问题是 brightcove 在页面中转储 HTML 代码时生成了一个按钮，并且该按钮采用 div 的类（它也充当按钮）因此它的风格。解决方案是完全删除按钮，在 brightcove 生成它是 HTML 东西之后，意思是在 $(document).ready(function() =>{})

之后

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

元素在开发人员工具中显示为已删除，但在页面中仍然可见

Element shows as removed in developer tools, but is still present visually in the page

javascript

css

brightcove