jQuery 怎么监听id并改变id 的样式

Question

在页面中使用了一个第三方插件，这个插件的表现是一个按钮，它是使用行内样式固定在底部的，以下为它的样式：

初始状态样式：

    position: fixed !important;
    bottom: 0px !important;
    right: 0px !important;
    width: 90.1px !important;
    height: 93.5px !important;
    overflow: hidden;
    visibility: visible;
    z-index: 2147483639;
    background: transparent;
    border: 0px;
    transition: none !important;
    left: auto !important;
    padding: 0px !important;
    box-sizing: border-box !important;
    top: auto !important;
    opacity: 1;
    transform: translateY(0%);

使用的场景：需要每次发现页面中有 livechat-compact-container 这个ID时，就改变它的样式为：

改变后的样式：

    body #livechat-compact-container {
        position: absolute !important;
        bottom: 130px !important;
        right: 50px !important;
    }

为什么要这样呢？因为这个第三方插件在使用中有多种状态，每改变一次状态，这个 该死的id 的 style就恢复成初始的状态，它的样式会恢复成初始的样式。

我的想法是，每次加载完所有的页面后，监听这个 id ，只要页面中有这个id 出现，就改变这个id的样式。

<style>
    /*修改livechat的基本样式*/
    body #livechat-compact-container {
        position: absolute !important;
        bottom: 130px !important;
        right: 50px !important;
    }
    .change-css{
        position: absolute !important;
        bottom: 130px !important;
        right: 50px !important;
    }
</style>

$(function(){
    document.addEventListener("DOMContentLoaded","livechat-compact-container", function(event) {
            document.getElementById('livechat-compact-container').style.display == 'none';
            var id = document.getElementById('livechat-compact-container');
            if(id){
                document.getElementById('livechat-compact-container').removeAttribute('style').className = 'change-css';
            }
        });
})

我这样写不起作用，改变不了这个 id的style，请问我要怎么写呢？是哪里错了呢？

Answer 1

你可以搞个定时器，

setInterval(function(){
    // 这里放你的改变样式的代码
}, 100);

但是这样搞不好，有一定的延迟，用户可能会看到样式突然闪了一下。建议你去改插件的样式，如果他有css文件那就直接改就好了，如果没的话就搜下js里，肯定会有这个livechat-compact-container的

Answer 2

我在想你那个CSS代码怎么那么多important，那个提升的权重无限大，而且用js去修改起来也不方便

Answer 3

一个插件 不会这么傻吧 style里面还都是!import的

只能改源码 否则越搞越乱 难以维护