modifier css

Le
yoyo
bonjour,

je débute en js et j'aimerais pouvoir modifier une class css.

j'ai fais ceci





function modifierID()
{
var balise=document.getElementById(id)
balise.className.width em;
balise.className="comPre";
}




.comPre{

width:5em;
padding-top:0.5em; padding-bottom:0.5em;
height:2em;
background-color:orange;
text-align:right;
}
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
Pascal PONCET
Le #19788921
yoyo a écrit :
bonjour,



Bonsoir,

function modifierID()
{
var balise=document.getElementById(id)
balise.className.width em;
balise.className="comPre";
}



Remplacer
balise.className.width em;
par :
balise.style.width = "20em";

"className" est une propriété qui lit ou stocke une chaîne de caractères
représentant le nom de la classe de style d'un élément, autrement dit la
valeur de l'attribut "class" de la balise correspondante.
Il n'y a donc pas de propriété "width" associée à cette chaîne.

"style" est une propriété de type objet qui correspond à l'attribut
"style" d'un élément.
Cet objet, lui-même, reçoit comme propriétés tous les composants de
style contenus dans la valeur de l'attribut.

Parmi ces composants de style, "width" est associé à une valeur de type
chaîne de caractères, d'où les guillemets, donnant la largeur de
l'élément exprimée par un nombre et une unité de mesure.

Cela dit, je ne vois pas l'intérêt de gérer les deux, "className" et
"width", dans la même fonction.
Soit on joue sur les composants du style interne de la balise, soit on
joue sur la classe de style associée à l'élément, cette dernière option
étant généralement plus sure et élégante.

Cordialement,
Pascal
yoyo
Le #19802891
Pascal PONCET wrote:

yoyo a écrit :
bonjour,



Bonsoir,

function modifierID()
{
var balise=document.getElementById(id)
balise.className.width em;
balise.className="comPre";
}



Remplacer
balise.className.width em;
par :
balise.style.width = "20em";

"className" est une propriété qui lit ou stocke une chaîne de caractères
représentant le nom de la classe de style d'un élément, autrement dit la
valeur de l'attribut "class" de la balise correspondante.
Il n'y a donc pas de propriété "width" associée à cette chaîne.

"style" est une propriété de type objet qui correspond à l'attribut
"style" d'un élément.
Cet objet, lui-même, reçoit comme propriétés tous les composants de
style contenus dans la valeur de l'attribut.

Parmi ces composants de style, "width" est associé à une valeur de type
chaîne de caractères, d'où les guillemets, donnant la largeur de
l'élément exprimée par un nombre et une unité de mesure.

Cela dit, je ne vois pas l'intérêt de gérer les deux, "className" et
"width", dans la même fonction.
Soit on joue sur les composants du style interne de la balise, soit on
joue sur la classe de style associée à l'élément, cette dernière option
étant généralement plus sure et élégante.

Cordialement,
Pascal




merci de ces précisions, tu aurais pas un tuto a me filer sur la
manipulation du html et css
SAM
Le #19806611
Le 7/21/09 9:13 PM, yoyo a écrit :

tu aurais pas un tuto a me filer sur la
manipulation du html et css



à part avoir 3 ou 4 gros bouquins ... ?

Heu ... ça se manipule dans un éditeur-texte
comme NotePad+

Pour les css, on se met en favori/bookmark dans un bouton de sa barre
perso de son navigateur :

Ha? les commandes-fonctions en JS ?
Boudiou ! là y a du taf !

Apprentissage :
Tout est ici:

(en anglish) un exemple manip de html (du DOM):

Les "events" :

Pour aller plus loin :
exemple :
qui se réfère à :
donc essayer de lire, comprendre, retenir :


Bon! je dois bien avoir 2 à 300 bookmarks sur le sujet ...
--
sm
yoyo
Le #19810651
SAM wrote:

Le 7/21/09 9:13 PM, yoyo a écrit :

tu aurais pas un tuto a me filer sur la
manipulation du html et css



à part avoir 3 ou 4 gros bouquins ... ?

Heu ... ça se manipule dans un éditeur-texte
comme NotePad+




jusque là ca va :p
Pour les css, on se met en favori/bookmark dans un bouton de sa barre
perso de son navigateur :

Ha? les commandes-fonctions en JS ?
Boudiou ! là y a du taf !

Apprentissage :
Tout est ici:

(en anglish) un exemple manip de html (du DOM):

Les "events" :

Pour aller plus loin :
exemple :
qui se réfère à :
<http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#edef-


HEAD>
donc essayer de lire, comprendre, retenir :


Bon! je dois bien avoir 2 à 300 bookmarks sur le sujet ...


yoyo
Le #19826091
SAM wrote:

Le 7/21/09 9:13 PM, yoyo a écrit :

tu aurais pas un tuto a me filer sur la
manipulation du html et css



à part avoir 3 ou 4 gros bouquins ... ?

Heu ... ça se manipule dans un éditeur-texte
comme NotePad+

Pour les css, on se met en favori/bookmark dans un bouton de sa barre
perso de son navigateur :

Ha? les commandes-fonctions en JS ?
Boudiou ! là y a du taf !

Apprentissage :
Tout est ici:

(en anglish) un exemple manip de html (du DOM):

Les "events" :

Pour aller plus loin :
exemple :
qui se réfère à :
<http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#edef-


HEAD>
donc essayer de lire, comprendre, retenir :


Bon! je dois bien avoir 2 à 300 bookmarks sur le sujet ...




ok je vais jeter un oeil sur tes lien car j'ai essayé de faire une fonction
et l'utiliser dans un onclick mais il c'est rien passé.
yoyo
Le #19826231
yoyo wrote:

SAM wrote:

Le 7/21/09 9:13 PM, yoyo a écrit :

tu aurais pas un tuto a me filer sur la
manipulation du html et css



à part avoir 3 ou 4 gros bouquins ... ?

Heu ... ça se manipule dans un éditeur-texte
comme NotePad+




jusque là ca va :p
Pour les css, on se met en favori/bookmark dans un bouton de sa barre
perso de son navigateur :

Ha? les commandes-fonctions en JS ?
Boudiou ! là y a du taf !

Apprentissage :
Tout est ici:

(en anglish) un exemple manip de html (du DOM):

Les "events" :

Pour aller plus loin :
exemple :
qui se réfère à :
<http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#edef-


HEAD>
donc essayer de lire, comprendre, retenir :


Bon! je dois bien avoir 2 à 300 bookmarks sur le sujet ...




j'ai quelque chose de ce style

<p class="comPre"onclick="clicComPre();"> <br/>
aaaaaaaaaaaaaaaaaaaaa<br/bbbbbbbbbbbbbbbbbbbbbbb><p/>
SAM
Le #19840471
Le 7/24/09 9:46 PM, yoyo a écrit :
yoyo wrote:

SAM wrote:

Le 7/21/09 9:13 PM, yoyo a écrit :
tu aurais pas un tuto a me filer sur la
manipulation du html et css








(snip)
Bon! je dois bien avoir 2 à 300 bookmarks sur le sujet ...




j'ai quelque chose de ce style

<p class="comPre"onclick="clicComPre();"> <br/>
aaaaaaaaaaaaaaaaaaaaa<br/bbbbbbbbbbbbbbbbbbbbbbb><p/>




Oui ?
Et ?

JS :
=== function comPre() {
var p = document.getElementsByTagName('P'),
n = p.length,
obj;
if(n)
while(n--) if(p[n].className == 'comPre') {
obj = p[n];
break;
}
if(obj) {
obj.className = obj.className=='comPre'? 'comPre autre' : 'comPre';
}
else alert('erreur qque part ...!');
}

CSS :
==== .comPre { color: blue }
.comPre.autre { color: red }

--
sm
yoyo
Le #19850291
SAM wrote:

Le 7/24/09 9:46 PM, yoyo a écrit :
yoyo wrote:

SAM wrote:

Le 7/21/09 9:13 PM, yoyo a écrit :
tu aurais pas un tuto a me filer sur la
manipulation du html et css








(snip)
Bon! je dois bien avoir 2 à 300 bookmarks sur le sujet ...




j'ai quelque chose de ce style

<p class="comPre"onclick="clicComPre();"> <br/>
aaaaaaaaaaaaaaaaaaaaa<br/bbbbbbbbbbbbbbbbbbbbbbb><p/>




Oui ?
Et ?



ca marche pas ce que j'ai fais

JS :
=== > function comPre() {
var p = document.getElementsByTagName('P'),
n = p.length,
obj;
if(n)
while(n--) if(p[n].className == 'comPre') {
obj = p[n];
break;
}
if(obj) {
obj.className = obj.className=='comPre'? 'comPre autre' : 'comPre';
}
else alert('erreur qque part ...!');
}

CSS :
==== > .comPre { color: blue }
.comPre.autre { color: red }



SAM
Le #19850791
Le 7/29/09 9:11 PM, yoyo a écrit :
SAM wrote:

Le 7/24/09 9:46 PM, yoyo a écrit :
yoyo wrote:

SAM wrote:

Le 7/21/09 9:13 PM, yoyo a écrit :
tu aurais pas un tuto a me filer sur la
manipulation du html et css








(snip)
Bon! je dois bien avoir 2 à 300 bookmarks sur le sujet ...




j'ai quelque chose de ce style

<p class="comPre"onclick="clicComPre();"> <br/>
aaaaaaaaaaaaaaaaaaaaa<br/bbbbbbbbbbbbbbbbbbbbbbb><p/>



Oui ?
Et ?



ca marche pas ce que j'ai fais



Perdu ma boule de cristal ...

Je ne sais donc pas ce que tu as fait.

--
sm
Publicité
Poster une réponse
Anonyme