CODEWITHSUNDEEP
javascriptjquerycss
kendalbren
kendalbren

Reputation: 21

Remove styles using jQuery or any other method

I really need your expert help here!

I'm making a site which will showcase HTML emails. As such I need to remove all styling from within a particular div so I can copy and paste the HTML from the email. That will then maintain the original design of the email.

I've set up a test page here and tried using removeAttr from jQuery but it doesn't seem to be working.

I'm fine with coding HTML and CSS but javaScript is new to me so any really clear examples would be great.

By the way, I'm not hung up on jQuery. Anything that does the job would be brilliant!

Thanks in advance guys,

Brendan.

Here is the JavaSript and 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>

Here is the 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;
}

Upvotes: 2

Views: 1599

Answers (3)

Douglas
Douglas

Reputation: 37781

I'd recommend isolating your page from the html inside the emails using iframes. If you serve the email template content from a different domain from the parent page, then there will be less scope for malicious content to affect your site.

Something like this:

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

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

Without the cross domain barrier, if someone managed to execute javascript inside the template, then it wouldn't be able to go on and steal your user's cookies. Then as a bonus, since the content will be in different pages, you won't have any problems with the CSS mixing between the different pages.

Upvotes: 0

Yazan Tommalieh
Yazan Tommalieh

Reputation: 63

I think what you need is in javascript:

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

Upvotes: 0

Andreas Louv
Andreas Louv

Reputation: 47137

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

Upvotes: 2

Related Questions