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 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").
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").
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
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:
Comment puis-je faire heriter le nouveau du premier?
Olivier Miakinen
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}
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.
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}
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.
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}
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.
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
Si en javascript je recopie le 2eme en creant un nouveau:
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>
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
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.
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.
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.
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.
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.
