Récupérer tous les styles en JS

Bonjour tout le monde!

Est-il possible, en javascript, de récupérer tous les styles d'un élément et de les appliquer à un autre élément?

Je m'explique. J'aimerais qu'un <div> ressemble à un <textarea> (pour indiquer à l'utilisateur qu'en cliquant il pourra modifier le contenu). Dois-je appliquer tous les styles un par un, en testant au préalable le navigateur, sa version, et en gérant un css différent dans chaque cas ? Ou existe-t'il une combine pour appliquer le style "textarea" à mon <div> ?

Salut,

Si tu utilises une librairie comme prototype, c'est très simple tu fais $$('div') et là il te sélectionne toutes les div du document, sinon tu peux faire $$('div.texte'), il va te sélectionner toutes les div avec la classe texte dans un tableau javascript.
Mais je ne sais pas si tu peux récupérer le css d'un élément textarea du navigateur, alors tu n'as qu'à le copier et le recréer. Finalement tu appliques un css à ce tableau d'éléments.

En gros il faut que j'habille mes <textarea> de la même façon pour tous les navigateurs et je j'applique le même style à mes <div> ?
Pas moyen de faire des "fake" <textarea> quel que soit le navigateur ??

Pourquoi ne pas mettre des textarea à la place de tes div?Tu peux aussi désactiver tes textarea.

Je ne vois pas trop bien le but de mettre des divs qui ressemblent à des textarea ^^

En effet, si je n'explique pas le cas entièrement, ça paraît bête (à moins que ça ne le soit de toute manière?):
J'ai des <div> et je veux leur donner le style "textarea" au survol de la souris.
En fait le but c'est que ma page soit normale (je veux pas des textareas partout) et que quand on passe la souris, on percute qu'on peut éditer le contenu.
Eventuellement je pourrais utiliser des textareas et désactiver la bordure et ne la réactiver qu'au survol de la souris... tout en désactivant l'ascenseur et en adaptant la hauteur au contenu...
Qu'est-ce qui est le plus simple ?

En sachant qu'il faudrait aussi que le fond de mon textarea sans bordure ni ascenseur ait la même couleur que le conteneur !!

Le style défini pour un TEXTAREA dépend de mécanismes propres au navigateur. Pour Firefox par exemple, on a les styles par défaut suivants:

textarea {
  -moz-appearance:textfield-multiline;
  -moz-binding:url(chrome://global/content/platformHTMLBindings.xml#textAreas);
  -moz-user-select:text;
  -x-system-font:none;
  background-color:-moz-field;
  border:2px inset threedface;
  color:-moz-fieldtext;
}

Tu peux éventuellement tenter de les dupliquer pour un autre élément, mais un test rapide me dit que -moz-appearance: textfield-multiline; ne s'applique pas correctement aux élémetns DIV.

Je te laisse imaginer la prise de tête (ou l'impossibilité complète de dupliquer les styles par défaut) pour les autres navigateurs.

Donc: opte pour un autre indicateur visuel. Passer d'une bordure discrète (border: 1px solid #ccc;) à une bordure en pointillés (border: 1px dashed #555;) au survol, par exemple. Utiliser un curseur personnalisé. Voire placer un gros masque translucide sur le DIV en question avec un texte qui dit «Éditer» ou «Modifier» en plein milieu. Il y a moyen de designer quelque chose de plus efficace que ce que tu avais en tête, je pense.