Changer classe du body

**6carbon** · 12/05/2014, 11h02

Hello ttlm,

J'essaie de changer la classe du body dans une page html, j'ai utilisé ce bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(document).ready(function(){
  document.body.className+="home";
  console.log('ici');
});

Bien que "ici" soit affiché dans la console, la classe du body ne change pas du tout.
Quelqu'un a une idée du pourquoi?

Merci d'avance.

**SpaceFrog** · 12/05/2014, 11h11

Dans ton code tu as ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.body.className+="home";

si tu a déja une classe il va concaténer ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"classeA" + "classeB" = "classeAclasseB"

si tu n'as pas de classe classeAclasseB ... mais deux classes classeA et classeB

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"classeA" + " classeB" = "classeA classeB"

Note l'espace avant classeB
=>

http://jsfiddle.net/G9E8j/

**johnlobs** · 12/05/2014, 11h25

Bonjour ,
je n'ai pas très bien compris ta question mais si tu veux changer la classe du body plusieurs methodes s'offrent à toi
tu ne dois pas mettre le + sinon tu concatène et faut mettre un espace au debut ;je pense que tu dois directement mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

documet.body.classname='home';

si tu veux remplacer un classe précise par une autre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.body.className.replace("ancienne","nouvelle");

tu peux aussi parcourir avec jquery et utiliser la methode addClass:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$( "body" ).addClass( "myClass yourClass" );

ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$( "body" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

sinon tu peux modifier le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$( "body" ).css()

j'espère avoir apporté des réponses à ta question
Bonne journée

**6carbon** · 12/05/2014, 12h07

Alors de base dans le fichier html, le body n'a pas de classe. Je voudrais lui en définir une dans un script.
J'ai essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.body.className='home';

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$( "body" ).addClass( "home" );

avec un console.log pour vérifier que ces lignes sont bien exécutées.
L'interpréteur passe bien par là, mais la classe du body n'est pas changée.

J'ai même mis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body class="gen">

dans le html et testé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.body.className.replace("gen","home");

A aucun moment le body ne prend la classe que je veux...

**SpaceFrog** · 12/05/2014, 12h51

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>Nouvelle page 1</title>
<style type="text/css">
.foo {color :red ;}
</style>
<script type="text/javascript" >
function swapClass(){
document.body.className='foo'
 }
</script>
 
</head>
 
<body onload="swapClass()">
texte
</body>
</html>

Aucun souci ...

**6carbon** · 22/05/2014, 14h00

Bon ça marche toujours pas sur ma page mais c'est le problème de mon collègue désormais et plus le mien.
Je passe donc en résolu merci pour votre aide.