Div с внешней таблицей стилей?

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

11
css html innerhtml styles

8 ответов

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

в вашем основном HTML-файле у вас будет DIV:

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

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

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

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

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

Это поможет вам много:

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

стиль применяется только к определенной разделителями escope. Удачи!

IMHO лучше, чем решение iframe..

по теме: ограничить область внешнего css только определенным элементом?

3

Я предлагаю вам оставить внешнюю таблицу стилей как есть и создать внутреннюю таблицу стилей с классами, которые вы хотите из внешней таблицы стилей, чтобы повлиять на ваш один div и просто переименовать его и применить эти переименованные классы к div. Переименование происходит потому, что атрибуты этих классов могут влиять на элементы, уже существующие на странице из внешних таблиц стилей.

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

надеюсь, что это помогает.

1

если у вас есть доступ к серверным скриптам (например, PHP), вы можете создать скрипт, который загружает внешнюю таблицу стилей и добавляет имя класса перед каждой записью. Затем примените этот класс к тегу DIV. Итак, если CSS включает:

p { font-size: 12px; }

вы бы изменили это на:

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

и отформатируйте DIV как

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

затем вы загружаете скрипт как таблицу стилей, а не внешнюю таблицу стилей напрямую.

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

Я предполагаю, что спецификации стиля внутри внешнего файла не содержатся в классах или идентификаторах, но являются ли они общими корректировками тегов, таких как <p> (и, следовательно, он не может быть включен в заголовки страниц). Включите div в <style scoped> tag и импортировать .css файл там. Смотри:http://css-tricks.com/saving-the-day-with-scoped-css/

0

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

0

scoped Это хорошая идея, но имеет проблему, совместимую с браузером.

Я решаю эту проблему, добавляя pre-class перед всем селектором в файле css:

https://github.com/ericf/grunt-css-selectors

0