html - 将用户代理样式表应用于 div？

Question

我一直在研究如何将用户代理样式表应用于 div。

这可能吗？

具体来说，我想将输入的用户代理样式表应用到我的一个网络应用程序中的一个 div。

Answer 1

我不相信有一种方法可以让一个元素轻易地继承另一个元素的样式。您可以尝试遍历输入的 computedStyle 并将其应用于 div，但这可能会比您想要的更多(即它可能也会选择其大小和形状)。它也不是特别优雅:

https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle

您可能会做的一件事是将输入绝对定位在 div 内，并将其设置为 div 的完整高度和宽度，以便它延伸到它上面。然后禁用它，但将背景颜色设置为白色。或者，将另一个 div 放在它的顶部以防止点击它并将它从 Tab 键顺序中取出:

JSFiddle:http://jsfiddle.net/p040gdos/

HTML

<div id="container">
    <input id="backgroundInput" tabindex="-1" />
    <div id="cover">content goes here</div>
</div>

CSS

#container {
    height: 100px;
    width: 100px;
    position: relative;
}

#backgroundInput {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

#cover {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
}