web-dev-qa-db-fra.com

Div avec feuille de style externe?

J'ai reçu une feuille de style externe (fichier .css) qui ne peut en aucun cas être modifiée. Cependant, je dois appliquer cette feuille de style à une seule div et donc au contenu de la div dans ma page Web déjà existante. Je lis actuellement le contenu de la feuille de style sous forme de texte dans une balise de style vide (en utilisant .innerHTML) dans le div que je dois affecter, mais cela affecte toujours la page Web entière plutôt que le seul div. Quelqu'un pourrait-il s'il vous plaît aider avec cela?

csshtmlstylesinnerhtml
12
LethalPapercut

La solution IFRAME fonctionne comme ceci:

Dans votre fichier HTML principal, vous aurez votre DIV:

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

Portez-le selon vos besoins. Le fichier divcontent.html doit être un fichier HTML complet, y compris le contenu de la balise DIV, et un LIEN utilisant votre feuille de style externe:

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

Si vous pouvez travailler avec HTML5, vous pouvez essayer d'utiliser styles étendus . Vous pouvez inclure le CSS à l'intérieur du div, en n'affectant que son parent:

<div>
    <style scoped>
        // Styles here
    </style>
</div>
6
Piet van Dongen

Cela vous aidera beaucoup:

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

Applique uniquement le style à une certaine étendue délimitée. Bonne chance!

À mon humble avis mieux que la solution iframe ..

connexes: Limiter la portée des CSS externes à un élément spécifique uniquement

3
Javier del Saz

Si vous avez accès à des scripts côté serveur (par exemple: PHP), vous pouvez créer un script qui charge la feuille de style externe et ajoute un nom de classe devant chaque entrée. Ensuite, appliquez cette classe à votre balise DIV. Donc, si le CSS comprend:

p { font-size: 12px; }

Vous modifieriez cela pour:

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

Et formatez votre DIV comme

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

Vous devez ensuite charger le script en tant que feuille de style, plutôt que directement la feuille de style externe.

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

Je suggère que vous puissiez laisser la feuille de style externe telle qu'elle est et créer une feuille de style interne avec les classes que vous souhaitez à partir de la feuille de style externe pour affecter votre div unique et simplement le renommer et appliquer ces classes renommées à la div. Le changement de nom est dû au fait que les attributs de ces classes peuvent affecter des éléments déjà existants sur la page à partir de feuilles de style externes.

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

J'espère que cela t'aides.

1
Nitesh

scoped est une bonne idée, mais a un problème compatible avec le navigateur.

Je résout ce problème en ajoutant une pré-classe avant tout sélecteur dans le fichier css:

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

0
Fancyoung

Je suppose que les spécifications de style à l'intérieur du fichier externe ne sont pas contenues dans des classes ou des ID, mais sont-elles des ajustements généraux à des balises comme <p> (et donc il ne peut pas être inclus dans vos en-têtes de page). Incluez votre div dans un <style scoped> tag et importez-y le fichier .css. Voir: http://css-tricks.com/saving-the-day-with-scoped-css/

0
NWard

Vous pouvez attribuer un préfixe CSS pour cibler la section de votre document que vous souhaitez styliser.

0
Morpheus