Rechercher : dans
Par :

Changer les propriétés css avec javascript

Dernière réponse le 1 nov 2007 à 14:23:55 Porridge, le 30 oct 2007 à 12:37:03 
 Signaler ce message aux modérateurs

Bonjour,

J'ai un petit souci avec Javascript. C'est un langage que je ne maitrise pas du tout, donc la solution du problème est peut-être toute simple. Bon voilà le problème. J'ai un site web ( http://www.preparer-les-concours.com à voir avec mozilla FF de préférence sinon c'est assez laid) et j'aimerais que l'utilisateur puisse changer le thème de la page en cliquant sur un lien (là où il y a marqué "changer le thème"). En fait g mis un onclick dans ma balise <a> et voilà le code pour ma fonction theme :
(comme c an'avait pas l'air de marcher du tout, je me suis limité à faire une fonction pour changer le theme de ma zone "texte" qui a déjà un style css défini)

function theme(texte)
{
with(document)
{
texte.style.background-color='#808080';
texte.style.color='#451200';
}
}

Voilà, je vois pas ce qui cloche, c'est ultra simple. Aussi, j'ai déjà utilisé le javascript pour afficher une info au survol de certains liens (le menu par exemple) en changeant simplement le style css des cadres d'info, les rendant hidden ou visible au passage de la souris, et le code était similaire à celui que je vous met au dessus.

D'où vient le problème ???

Merci d'avance, je n'y comprend plus rien.

Ah oui et à noter que le fait d'écrire cette fonction après les autres fait que plus aucune de mes fonctions Javascript ne marche. Et dernière précision, mon fichier javascript est indépendant de la page et est appelé par un tag <script> dans le <head>

Configuration: Windows XP
Firefox 2.0.0.5

Meilleures réponses pour « Changer les propriétés css avec javascript » dans :
Changer l'aspect du curseur en CSS VoirLa propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web. Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi. Exemples Liste des attributs...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Télécharger PSPad VoirPSPad est un excellent éditeur de texte. Il est utile pour travailler sur du simple texte, mais aussi sur du HTML, CSS, Javascript, php ou autres langages de programmation (C++, Java, Python...). Les fonctionnalités sont impressionnantes: ...
Télécharger Notepad2 VoirNotepad2 est un bloc-note sans installation libre possédant des fonctionnalités avancées de coloration syntaxique. Fonctionnalités Coloration syntaxique pour les langages suivants : HTML, XML, PHP, ASP (JScript, VBS), CSS, JavaScript, VBScript,...
Les feuilles de style VoirPropriétés de polices Propriété Valeur Description font-family Police précise (Arial, Times, Verdana) Famille (serif, sans-serif, fantasy, monospace, cursive) Définit un ou plusieurs nom de polices ou de familles de...

1

Dalida, le 30 oct 2007 à 15:25:55
  • +1

Salut,

si tu veux pouvoir modifier le thème entier, il existe des codes source de style switchers en php et en Javascript.

écrire cette fonction après les autres fait que plus aucune de mes fonctions Javascript ne marche
une erreur JS peut faire planter tout le code de la page.
utilise l'extension FireBug, elle te déminera tout ça !!!

[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

2

Porridge, le 30 oct 2007 à 15:46:52

Ok

Merci beaucoup, je vais voir tout ca.

Répondre à Porridge

3

PhP, le 30 oct 2007 à 21:23:48

Bonsoir

Parmi les opérateurs arithmétiques ont trouve le + mais aussi le - ...

Donc si tu écris

texte.style.background-color tu essais de soustraire color de texte.style.background ;-) Certe JavaScript est tolérant mais qd même
Surtout qu'ensuite tu essais d'affecter une chaîne au résultat du calcul .. Là c'en est trop LOL

Bref et si tu écrivais :

texte.style.backgroundColor = '#808080';   


Ceci dit même comme ça j'ai bien peur que ça ne fonctionne toujours pas !

Personnellement j'écrirais plutôt
function theme(eltId) 
{ 
	var elt = document.getElementById(eltId);
	elt.style.backgroundColor='#808080'; 
	elt.style.color='#451200'; 
} 


Bon faudrait tester que elt est valide ...

Voilà


PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

Répondre à PhP

4

bg62, le 31 oct 2007 à 11:59:12
  • +1

Bonjour
j'ai eu le même problème que toi, (pas pour un thème mais pour les couleurs, ce qui revient a même)
et j'ai trouvé la solution ici avec beaucoup d'aide pour le switcher mais cela se passe en php !!!
exemple : http://unesourisetmoi.free.fr
cliquer sur le menu 'choisir votre couleur'
donc normalement c'est faisable, mais tout dépend de ton niveau en php
bon courage
@mitiés
b g
le 'www' est fait aussi pour communiquer, partager et échanger, non ?

Répondre à bg62

5

 Porridge, le 1 nov 2007 à 14:23:55

Salut,

J'ai aussi un piètre niveau de php mais je préfère ce langage que Javascript qui me parait être un langage très peu intuitif. Les après-midi que j'ai passé à ne pas comprendre d'où pouvait bien pouvoir venir le problème dans chacune de mes tentatives en Javascript... Bon bref, merci beaucoup à vous tous pour vos réponses rapides, je vais voir ça. Euh sinon j'ai un autre problème que je pensais résoudre en Javascript mais qui pourrait peut-être marcher en utilisant le php. Mais je crois que ca serait un peu hors sujet ici, je vais donc ouvrir un autre post.

A plus

Répondre à Porridge