Div with external stylesheet?

问题

I have been given an external stylesheet (.css file) that may not altered in any way whatsoever. However I need to apply this stylesheet to a single div and therefore the contents of the div in my already existing webpage. I am currently reading the contents of the stylesheet as text into a blank style tag (using .innerHTML) within the div I need to affect but this still affects the entire web page rather than just the single div. Could someone please help with this?

回答1:

The IFRAME solution works like this:

In your main HTML file, you'll have your DIV:

<div id="myspecialdiv">
    <iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>

Style that as you need it. The divcontent.html file should be a complete HTML file, including the content of the DIV tag, and a LINK using your external stylesheet:

<html>
    <head>
        <link rel="stylesheet" href="path/to/external/stylesheet.css" />
    </head>
    <body>
        <!-- The contents of your DIV -->
    </body>
</html>

回答2:

If you can work with HTML5, you could try using scoped styles. You could include the CSS inside the div, having it affect only its parent:

<div>
    <style scoped>
        // Styles here
    </style>
</div>

回答3:

This will helps you a lot:

http://css-tricks.com/saving-the-day-with-scoped-css/

Applies only style to a certain delimited escope. Good luck!

IMHO better than the iframe solution..

related: Limit scope of external css to only a specific element?

回答4:

I suggest you can leave the external style sheet as it is and create an internal style sheet with the classes that you want from the external stylesheet to affect your single div and just rename it and apply those renamed classes to the div. The renaming is because the attributes of those classes may affect elements already existing on the page from external stylesheets.

<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>

Hope this helps.

回答5:

If you have access to server-side scripting (eg: PHP), you could create a script that loads the external stylesheet, and appends a class name in front of every entry. Then apply this class to your DIV tag. So, if the CSS includes:

p { font-size: 12px; }

You'd modify that to:

.mydiv p { font-size: 12px; }

And format your DIV as

<div class="mydiv">...</div>

You would then load the script as a stylesheet, rather than the external stylesheet directly.

<link rel="stylesheet" href="path/to/internal/script.php" />

回答6:

I assume that the style specifications inside the external file are not contained in classes or IDs, but are they blanket adjustments to tags like <p> (and thus it cannot be included in your page headers). Include your div in a <style scoped> tag and import the .css file there. See: http://css-tricks.com/saving-the-day-with-scoped-css/