javascript - 动态添加div : fixed, 动态宽度，居中

Question

我知道这是一个常见问题，但请听我说完，因为我还没有看到任何有效的解决方案。

这个居中的 div 在 jsfiddle 上完美运行，但不适用于我的 chrome 扩展。在我的 chrome 扩展中，我将带有此 css 的 div 动态附加到给定网页的正文(使用 document.body.appendChild)，但它没有显示。当我进一步检查时，我可以看到我正在访问的网站正在将它自己的样式应用于我的 div；我不确定这是否会影响事情。

http://jsfiddle.net/StEek/

html:

.myDiv{
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
    background-color: red;
}

CSS:

<div class="myDiv">
    <p>coolio</p>
</div>

有什么方法可以动态添加一个只应用我的样式的 div 到任何网页吗？我想要一个固定的、动态宽度居中的 div，它将附加到 body 元素。

Answer 1

您需要为您的 div 指定一个 id 并为该 id 而不是 class 元素设置样式。

如果网站为网页上的所有 div 设置样式，您将需要用自己的样式覆盖这些样式。