Menu
Is there a simple way via CSS or javascript or anything really to take a div and make it not inherit any styles?
I'm creating a bookmarklet which adds a header to a website. It modifies the DOM as follows:
var bodycontent = document.body.innerHTML;
document.body.innerHTML = '';
var header = document.createElement('div');
var bodycontainer = document.createElement('div');
header.setAttribute('id', 'newdiv-header');
bodycontainer.setAttribute('id','newdiv-bodycontainer');
header.innerHTML = "MY STUFF";
bodycontainer.innerHTML = bodycontent;
document.body.appendChild(header);
document.body.appendChild(bodycontainer);
so effectively what we end up with is this:
<html>
<head> ...original head stuff... </head>
<body>
<div id="newdiv-header"> MY CONTENT </div>
<div id="newdiv-bodycontainer"> ...original content of document.body.innerHTML... </div>
</body>
</html>
all styled appropriately so that everything is visible, etc. The problem is that the original page's stylesheet affect the look of my header. I'd use frames and/or iframes but this breaks on sites which implement framebusting.
Thank you very much for any ideas!
496
My only idea is to set every relevant CSS property to the default (or whatever you need). I don't think there's a way of preventing styles from being applied on a single div.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
