cascade css

Le
Michel Jeandon
bonjour tout le monde,

dans un css(firefox), j'ai le nom retourne par

document.styleSheet[0].cssRules[0].selectorText

par exemple
#page ul li ul li A

Y a-t-il un moyen de recuperer le nom du style parent par une fonction
toute faite ou faut-il analyser le nom en separant par les espaces

pour retrouver le parent qui est presentement:
#page ul li ul li

Merci, si vous avez une idéee
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Miakinen
Le #775056

dans un css(firefox), j'ai le nom retourné par

document.styleSheet[0].cssRules[0].selectorText

par exemple
#page ul li ul li A


Autre exemple :
p, #body ul #image, a+p, div>div+a, div > * > p > *

Y a-t-il un moyen de recuperer le nom du style parent par une fonction
toute faite ou faut-il analyser le nom en separant par les espaces

pour retrouver le parent qui est presentement:
#page ul li ul li


Quel serait le parent dans mon autre exemple ?

Merci, si vous avez une idée


L'idée, c'est que la question n'a pas vraiment de sens...

Olivier Miakinen
Le #775055
Le 19/12/2007 16:42, je répondais à Michel Jeandon :

Merci, si vous avez une idée


L'idée, c'est que la question n'a pas vraiment de sens...


Voici un autre exemple qui sera peut-être un peu plus parlant.

Suppose que le HTML contienne ceci :
<body>
<div>
<p>
texte
</p>
</div>
</body>

... et que les css contiennent cela :
body { background-color: green; }
body p { background-color: red; }
div { background-color: blue; }

En suivant la logique de ta question, on pourrait penser que le style
« parent » du "body p" serait "body", or la couleur de fond de l'élément
parent du <p> (celle de "body") n'est pas verte mais bleue (celle de
"div").


Michel Jeandon
Le #775054
dans un css(firefox), j'ai le nom retourné par

document.styleSheet[0].cssRules[0].selectorText

par exemple
#page ul li ul li A


Autre exemple :
p, #body ul #image, a+p, div>div+a, div > * > p > *

Y a-t-il un moyen de recuperer le nom du style parent par une fonction
toute faite ou faut-il analyser le nom en separant par les espaces

pour retrouver le parent qui est presentement:
#page ul li ul li


Quel serait le parent dans mon autre exemple ?

Merci, si vous avez une idée


L'idée, c'est que la question n'a pas vraiment de sens...


Bon, j'ai mal expliqué.

soit le style:

#page ul {background-color : red}

et le suivant:

#page ul li {color : blue}

le deuxieme ecrit en bleu sur fond rouge parce qu'il herite de son parent

Si en javascript je recopie le 2eme en creant un nouveau:

thechaine document.styleSheets[0].cssRules[x].cssText.substring(document.styleSheets[0].cssRules[x].selectorText.length+1,document.styleSheets[0].cssRules[x].cssText.length);
document.styleSheets[0].insertRule('.nouveaustyle'+thechaine,document.styleSheets[0].cssRules.length);

Comment puis-je faire heriter le nouveau du premier?


Olivier Miakinen
Le #774836

Bon, j'ai mal expliqué.


Ok. Reprenons.

soit le style:

#page ul {background-color : red}

et le suivant:

#page ul li {color : blue}


Oui.

le deuxieme ecrit en bleu sur fond rouge parce qu'il herite de son parent


Non, ce n'est pas le deuxième style CSS qui hérite du premier style
CSS, mais éventuellement un élément HTML qui hérite d'un style CSS de
l'élément HTML parent.

Je complète ton exemple en ajoutant un troisième style :

#body div div * {background-color : green}
#page ul {background-color : red}
#page ul li {color : blue}

Et voici le code HTML :

<body id='body'>
<div>
<div id='page'>
<ul>
<li>
...
</li>
</ul>
</div>
</div>
</body>

Dans cet exemple, le contenu du li sera écrit en bleu sur fond vert,
n'en déplaise à ton « style parent ».

Si en javascript je recopie le 2eme en creant un nouveau:

thechaine > document.styleSheets[0].cssRules[x].cssText.substring(document.styleSheets[0].cssRules[x].selectorText.length+1,document.styleSheets[0].cssRules[x].cssText.length);
document.styleSheets[0].insertRule('.nouveaustyle'+thechaine,document.styleSheets[0].cssRules.length);

Comment puis-je faire heriter le nouveau du premier?


Encore une fois, « faire hériter un style d'un autre style » ça ne veut
rien dire. Et JavaScript ne peut rien faire pour aider à ce que cela
veuille dire quelque chose.

Si tu veux faire hériter un élément HTML des propriétés CSS d'un autre
élément HTML, il suffit que les règles d'héritage et de cascade s'y
appliquent.

Voir
SAM
Le #774835

Si en javascript je recopie le 2eme en creant un nouveau:

thechaine > document.styleSheets[0].cssRules[x].cssText.substring(document.styleSheets[0].cssRules[x].selectorText.length+1,document.styleSheets[0].cssRules[x].cssText.length);
document.styleSheets[0].insertRule('.nouveaustyle'+thechaine,document.styleSheets[0].cssRules.length);

Comment puis-je faire heriter le nouveau du premier?


Ne serait-il pas plus simple de créer de nouveaux css ?
(qui hériteraient naturellement des anciens)
Ça pourrait peut-être éviter ce casse-tête de recherche de qui fait quoi
et quand et comment, et où il faut insérer la nouvelle règle.



<html>
<head>
<title>test css evolutifs</title>
<style type="text/css">
body { background-color: green; }
body p { background-color: red; }
div { background-color: blue; }
</style>
<script type="text/javascript">
function nouvellecss() {
var s = document.createElement('style');
s.type = 'text/css';
var cible = document.getElementsByTagName('head')[0];
var regle = 'body p { background-color: yellow; }';
s.innerHTML = regle;
cible.appendChild(s);
}
</script>
<body>
<div>
<p>
texte
</p>
</div>
<p><button onclick="nouvellecss();">nouvelle css</button>
<button onclick="var h=document.getElementsByTagName('head')[0],
s=document.getElementsByTagName('style')[1];
h.removeChild(s,h);">
reset
</button>
</p>
</body>
</html>

--
sm

Michel Jeandon
Le #774833
Bon, j'ai mal expliqué.


Ok. Reprenons.

soit le style:

......


Si tu veux faire hériter un élément HTML des propriétés CSS d'un autre
élément HTML, il suffit que les règles d'héritage et de cascade s'y
appliquent.

Voir

Merci pour vos réponses.
Merci pour le lien, je vais re-potasser à tete reposée.

En fait je veux faire un "visualiseur" de css

En premiere colonne, j'ai le nom du style renvoyé par
document.styleSheets[0].cssRules[x].selectorText que je formatte sur
plusieurs ligne (pas de probleme)
exemple:
#page ul li
.menu div ul li A

la 2eme colonne j'affiche le detail des styles (pas de probleme non plus)

exemple:
bagkground-color : blue;
padding : 5px;

et la 3eme colonne je voudrai visualiser le style, mais c'est la que ca
se corse (oeuf corse)
si je fait:

<td class='monstyle'> exemple </td>
j'affiche le style ".monstyle", la pas de probleme
mais pour afficher la balise "A" je ne peut pas le mettre dans dans un
class c'est donc pour ca que je cree un nouveau style ".monstyle" en lui
mettant les attributs du style precedant et je le debarasse de ces
balises d'emplacement: position;static;top:0px;left:0px;display:inline;...

Donc en 3eme colonne, je visualise mon style dans la case sans probleme,
sauf que je n'ai plus la cascade, et si je n'ai pas de fond et que dans
la cascade j'ai un fond rose, je n'ai pas le fond rose.

Et la je seche un peu.
A part cree un tableau de chaque selectorText et creer une nouvelle
cascade...
Je ne vois pas de choses simple.


Publicité
Poster une réponse
Anonyme