2013-05-03 3 views
9

Мне дана внешняя таблица стилей (.css-файл), которая не может быть изменена каким-либо образом. Однако мне нужно применить эту таблицу стилей к одному div и, следовательно, к содержимому div на моей уже существующей веб-странице. В настоящее время я читаю содержимое таблицы стилей как текст в пустой тег стиля (используя .innerHTML) в div, который мне нужно затронуть, но это все равно затрагивает всю веб-страницу, а не только один div. Может кто-нибудь помочь с этим?Div с внешней таблицей стилей?

+0

CSS влияет на всю страницу. Единственный способ, которым я знаю, изолировать это, так что он влияет только на определенную часть страницы - это использовать IFRAME. –

+0

Итак, IFRAME внутри моего div? Я могу это сделать, но тогда как я могу повлиять только на IFRAME? – LethalPapercut

ответ

9

IFRAME работает следующим образом:

В вашей основной HTML файл, вы будете иметь свой DIV:

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

стиль, который, как вам нужно. Файл divcontent.html должен быть полным HTML-файлом, в том числе содержания DIV тега и LINK с помощью внешних стилей:

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

говорят, что мне дано несколько внешних таблиц стилей. как я могу связать их все с divcontent.html во время выполнения? Я работаю над веб-приложением, которое постоянно получает новые .css-файлы. – LethalPapercut

+0

Это зависит от вашей среды выполнения, языка, который вы используете для разработки веб-приложения, рамки, на которой оно основано, и архитектуры вашего приложения. Но нет требования, чтобы файл 'divcontent.html' фактически был HTML - это мог быть любой файл, который создает HTML (например: PHP, aspx и т. Д.). Ответ дает вам концепцию - вам придется адаптировать ее к вашим конкретным требованиям. –

6

Если вы можете работать с HTML5, вы можете попробовать использовать scoped styles. Вы можете включить CSS внутри DIV, имея это влияет только его родитель:

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

Похоже на удивительное решение, но оно не соответствует моим потребностям, поскольку атрибут scoped не поддерживается ни в одном из основных браузеров. – LethalPapercut

+0

Я хочу ссылаться на внешние файлы CSS, и, похоже, это невозможно сделать внутри тега