gpt4 book ai didi

html - 保持 DIV 具有独立的样式定义

转载 作者:太空宇宙 更新时间:2023-11-04 02:17:33 25 4
gpt4 key购买 nike

我将 metro-ui-css 用于我的网络应用程序,外观和感觉都很棒。现在我将一个 word 文档(具有自己的样式)加载到一个 DIV 中。 word文档加载后,会覆盖一些metro-ui-css样式规则,这样观感就变得意想不到了……

为了简化问题,我在下面创建了一个演示。单击按钮后,我只希望下面的文本为蓝色,而不是全部。 问题是除了使用 <iframe> , 是否可以隔离样式定义?

function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`
);
}
<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>

最佳答案

我知道您不能修改 html,您必须更改函数以便 div 具有红色文本。您可以通过更改 <style>div{color:red;}</style> 来做到这一点

function insert() {
$('#fragment').html(`
<html>
<head>
<style>div{color:red;}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}
<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>

关于html - 保持 DIV 具有独立的样式定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38659304/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com