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

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

我已经设置了一个测试页here，并尝试从jQuery中使用removeAttr，但它似乎没有工作。

我很好的编码HTML和CSS，但是javaScript对我来说是新的，所以任何真正清晰的例子都会很棒。

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

在此先感谢你们，

Brendan。

这里是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; 
}

来源

2012-11-26 kendalbren

在帖子中发布相关的HTML/CSS代码。 –

你应该只需要CSS就可以了。做到这一点的正确方法是明确你的样式，而不是首先包含包含div的样式。 – Shmiddty

jQuery只会在内联样式中删除'style'标签。在css中指定'border'将不允许jQuery删除它。 –

我想你需要的是在javascript：

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

来源

2012-11-26 20:42:05

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

来源

2012-11-26 20:42:13 andlrc

+1，但这不容易撤销。 – pimvdb

你是怎么说这不容易撤销的？这是否意味着HTML之后，该div也将是无风格的？ – kendalbren

@kendalbren我认为pimvdb意味着当这段代码运行时，没有办法在没有刷新浏览器的情况下将页面恢复到以前的样子。 – andlrc

我会建议从html insid中隔离你的页面e使用iframe的电子邮件。如果您从父页面的不同域中提供电子邮件模板内容，那么恶意内容会影响您的网站的范围会缩小。

事情是这样的：

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

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

没有跨域屏障，如果有人设法执行模板中的javascript，那就不能去，窃取你的用户的cookie。然后，作为奖励，由于内容将位于不同的页面中，因此不会在不同页面之间混合使用CSS。

来源

2012-11-26 20:46:41 Douglas

这似乎是一个好主意，谢谢。如果我在同一个域上使用iframe，风险是否很大？ – kendalbren

这是我在提出建议时所考虑的文章：http：//googleonlinesecurity.blogspot.co.uk/2012/08/content-hosting-for-modern-web.html – Douglas

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

回答

相关问题