使用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或任何其他方法刪除樣式

回答

相關問題