Question

我真的需要你的专家帮助！

我正在制作一个展示HTML电子邮件的网站。因此，我需要从特定div中删除所有样式，以便我可以复制并粘贴电子邮件中的HTML。然后，这将保持电子邮件的原始设计。

我已经设置了一个测试页面here并尝试使用jQuery中的removeAttr，但它似乎无法正常工作。

我可以编写HTML和CSS，但javaScript对我来说是新的，所以任何非常明确的例子都会很棒。

顺便说一句，我没有挂断jQuery。任何能胜任这项工作的人都会很棒！

先谢谢你们，

布伦丹。

这是JavaSript和HTML

<link rel='stylesheet' id='style-css'  href='css/style.css' type='text/css' media='all' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

</head>

<body>
    <script type='text/javascript'>
        $(document).ready(function() {
    $('h1').removeAttr('style');
    });
</script>
<p>This is a paragraph tag.</p>
<h1>This is a H1 tag.</h1>
<div>
    <p>This is a p tag inside a styled div.</p>
    <table width="200" border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</div>
</body>
</html>

这是CSS

table, th, td {
    border: 1px solid #CCCCCC;
}
table {
    margin-bottom: 1.5em;
    max-width: 100%;
    width: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
p, address {
margin-bottom: 1.5em;
font-size:19px;
}
h1{
    border-bottom: 5px solid #666666;
}
h1{
    font-family: "Oswald";
    line-height: 1.5;
    margin: 0 0 0;
    padding-bottom: 0.3em;
    text-transform: lowercase;
}
h1{
    font-size: 2em;
    line-height: 1;
    margin-bottom: 1em;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-size: 100%;
    font-weight: normal;
}
div{
    background-color:#9F0;
}

Answer 1

jQuery(function($) {
    $("style, link[rel=stylesheet]").remove();
    $("*").removeAttr("style");
});

Answer 2

我认为你需要的是javascript：

document.getElementById('your_div').style='';
document.getElementById('your_div').setAttribute("class","");

Answer 3

我建议使用iframe将您的网页与电子邮件中的html隔离开来。如果您从父网页提供来自其他域的电子邮件模板内容，则恶意内容的影响范围将会缩小，从而影响您的网站。

这样的事情：

<!-- in http://www.company.com/templates/123 -->

<iframe src="http://www.usercontent.com/templates/123.html"></iframe>

如果没有跨域屏障，如果有人设法在模板中执行javascript，那么它就无法继续窃取用户的cookie。然后作为奖励，由于内容将在不同的页面中，因此不同页面之间的CSS混合不会有任何问题。

使用jQuery或任何其他方法删除样式

3 个答案: