Load an external CSS for a specific DIV

Question

So basically I have a page that has it\'s own CSS. On my server I have a folder of different CSS style files, so I want to have a \"preview\" window on my page for them. Can

Answer 1

You could use an iframe to load the preview page or dynamically load the CSS into the page. But, if you want the styles to only by applied to the div, you have to prefix your CSS selectors with the id of the div. #div-id #element-inside-div { }.

The script for loading it in might look something like this:

var cssFile = document.createElement( "link" );
cssFile.rel = "stylesheet";
cssFile.type = "text/css";
cssFIle.href = "file.css";
document.getElementsByTagName( "head" )[0].appendChild( cssFile );