Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript modifier css

modifier css

9 réponses
Avatar
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=20em;
balise.className="comPre";
}




.comPre{

width:5em;
padding-top:0.5em; padding-bottom:0.5em;
height:2em;
background-color:orange;
text-align:right;
}
Signaler un problème avec ce contenu

9 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Pascal PONCET
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
Avatar
yoyo
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
Avatar
SAM
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 :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>

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

Apprentissage :
Tout est ici:
<http://fr.selfhtml.org/javascript/index.htm>
<http://fr.selfhtml.org/javascript/intro.htm>
<http://fr.selfhtml.org/navigation/recherche/index.htm>

(en anglish) un exemple manip de html (du DOM):
<http://www.webreference.com/js/column44/index.html>

Les "events" :
<https://developer.mozilla.org/fr/DOM/element>
<http://www.aarongray.org/Test/JavaScript/EventTest.html>

Pour aller plus loin :
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html>
exemple :
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-798055546>
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 :
<http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html>


Bon! je dois bien avoir 2 à 300 bookmarks sur le sujet ...
--
sm
Avatar
yoyo
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 :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>

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

Apprentissage :
Tout est ici:
<http://fr.selfhtml.org/javascript/index.htm>
<http://fr.selfhtml.org/javascript/intro.htm>
<http://fr.selfhtml.org/navigation/recherche/index.htm>

(en anglish) un exemple manip de html (du DOM):
<http://www.webreference.com/js/column44/index.html>

Les "events" :
<https://developer.mozilla.org/fr/DOM/element>
<http://www.aarongray.org/Test/JavaScript/EventTest.html>

Pour aller plus loin :
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html>
exemple :
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-798055546>
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 :
<http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html>


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


Avatar
yoyo
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 :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>

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

Apprentissage :
Tout est ici:
<http://fr.selfhtml.org/javascript/index.htm>
<http://fr.selfhtml.org/javascript/intro.htm>
<http://fr.selfhtml.org/navigation/recherche/index.htm>

(en anglish) un exemple manip de html (du DOM):
<http://www.webreference.com/js/column44/index.html>

Les "events" :
<https://developer.mozilla.org/fr/DOM/element>
<http://www.aarongray.org/Test/JavaScript/EventTest.html>

Pour aller plus loin :
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html>
exemple :
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-798055546>
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 :
<http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html>


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é.
Avatar
yoyo
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 :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>

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

Apprentissage :
Tout est ici:
<http://fr.selfhtml.org/javascript/index.htm>
<http://fr.selfhtml.org/javascript/intro.htm>
<http://fr.selfhtml.org/navigation/recherche/index.htm>

(en anglish) un exemple manip de html (du DOM):
<http://www.webreference.com/js/column44/index.html>

Les "events" :
<https://developer.mozilla.org/fr/DOM/element>
<http://www.aarongray.org/Test/JavaScript/EventTest.html>

Pour aller plus loin :
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html>
exemple :
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-798055546>
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 :
<http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html>


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/>
Avatar
SAM
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
Avatar
yoyo
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 }



Avatar
SAM
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