为什么 Chrome 报告 element.style 规则不在我的代码中？

Question

我的一个 div 应用了以下规则，即使它们不在我的 CSS、javascript 或内联 HTML 中。 margin:0px 和 padding:0px 破坏了网站的布局，我需要覆盖它们。将 margin:initial 和 padding:initial 内联添加到相关元素不起作用。

实际的HTML如下。有问题的 div 是 col-sm-4 col-sm-offset-1。

<section class="section">
        <div class="container">
            <div class="row">
                <div class="col-sm-4 col-sm-offset-1" style="">
                    <div id="ad-middle" class="panel panel-default" style="min-height:320px;">
                        <div class="panel-body" style="padding:0;">                             
                            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
                            </script>
                            <!-- AdSense Responsive -->
                            <ins class="adsbygoogle"
                            style="display:block"
                            data-ad-client="..."
                            data-ad-slot="..."
                            data-ad-format="rectangle"></ins>
                            <script>
                                (adsbygoogle = window.adsbygoogle || []).push({});
                            </script>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                </div>
            </div>
        </div>
</section>

我很乐意编辑问题并提供其他信息和代码，例如 CSS 文件中的片段，尽管它们不包含任何接近调试器报告的规则的内容。

编辑：我可以确认是 AdSense 代码改变了父级 div 的样式。我尝试从 div 中删除 AdSense 代码，这使得 margin:0 和 padding:0 规则消失。我如何覆盖这些规则？

Answer 1

在做所有事情之前，将一个 Id 添加到您的 div "col-sm-4 col-sm-offset-1"，然后在关闭正文标记之前将此脚本添加到您的 html 文件中。

<script type="text/javascript">
    // you can get element by class name but in this example it's better to get it by Id. so I quote this line.
    // var x = document.getElementsByClassName("col-sm-4 col-sm-offset-1");

    var x = document.getElementById("adSenseDiv");

    // set your styles inside css variable as below
    var css = {
           color: 'purple',
           background-color: '#e5e5e5',
           height: '150px'
          };
    Object.assign(x.style, css);
</script>

或者您可以改为添加：

<script type="text/javascript">            
        var style = document.createElement('style');

        document.body.appendChild(style);

        // add your styles here
        style.sheet.insertRule('#adSenseDiv {color: darkseagreen}');
    </script>

为什么 Chrome 报告 element.style 规则不在我的代码中？

Why is Chrome reporting element.style rules that are not in my code?

html

css

dom

inline