Accueil > Forum > > > > Recuperer un style em en javascript
Recuperer un style em en javascript
jeudi 24 avril 2008 à 07:23:22 |
Recuperer un style em en javascript

MATHIS49
|
Bonjour,
j'aimerais recuperer la taille d'un div en Px qui est lui même en Em, J'ai trouvé ce script :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head>
<body>
<div id="test" style="width:3em">toto</div> <script type="text/javascript"> function getStyle(oElm, strCssRule){ var strValue = ""; if(document.defaultView && document.defaultView.getComputedStyle){ strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule); } else if(oElm.currentStyle){ strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ return p1.toUpperCase(); }); strValue = oElm.currentStyle[strCssRule]; } return strValue; }
alert(getStyle(document.getElementById("test"), "width"));
</script> </body> </html>
Le probleme est que tout marche pour le mieux sur firefox mais sur internet explorer 6, ce stupide navigateur me renvoie la valeur Em. Comment resoudre ce petit tracas ?
Merci !
|
|
jeudi 24 avril 2008 à 09:53:28 |
Re : Recuperer un style em en javascript

bultez
|
Bonjour,
je ne vois pas en quoi ce peut-être stupide de renvoyer "3em",
lorsque c'est ce qu'on écrit dans l'attribut ???
je dirais même que c'est tout à fait normal, légitime, correct...
et tout et tout...
en tout cas c'est ce que fait IE et ça ne me semble pas être une absurdité,
FF lui retourne effectivement cette valeur transformée, et sans porter
aucun jugement sur ce superbe navigateur, je préfère le comportement
de IE...
au moins sur sur ce coup là ! car ce peut-être disons... génant.
en simplifiant l'exemple fourni :
<body>
<div id="test" style="width:3em">toto</div>
<script type="text/javascript">
var d=document.getElementById("test");
alert( d.style.width +"\n"+
d.clientWidth
);
var ie = false; /*@cc_on ie = true; @*/
if ( !ie )
alert( window.getComputedStyle(d,null).width );
else alert( d.currentStyle.width )
</script>
</body>
Cordialement.
|
|
jeudi 24 avril 2008 à 18:25:59 |
Re : Recuperer un style em en javascript

PetoleTeam
|
Bonjour à tous,
| mais sur internet explorer 6, ce stupide navigateur me renvoie la valeur Em |
| il est vrai que ce commentaire est de trop attendu que seul IE, sur ce coup, répond à se qu'on lui demande.
Le fait que mettre la largeur en em présente l'avantage d'avoir le même comportement sur les différents navigateurs l'orsque l'on augmente la taille de la font du DIV
Longueur en em entraîne quelle est relative à la taille de caractère employée par l'élément conteneur. exemple 1.5em = 150% de la taille de caractère définie par l'élément parent.
Mais je m'égare me semble t-il...
Pour connaître la taille en pixel des éléments il y a les incontournables offsetWidth et offsetHeight. exemple : var O_Div = document.getElementById("D_TEST"); var Larg = O_Div.offsetWidth; var Haut = O_Div.offsetHeight; alert( "offset : \nLargeur = " +Larg +"\nHauteur = " +Haut);
ou encore clientWidth et clientHeight. exemple : var O_Div = document.getElementById("D_TEST"); var Larg = O_Div.clientWidth; var Haut = O_Div.clientHeight; alert( "client : \nLargeur = " +Larg +"\nHauteur = " +Haut);
...mais gare à la prise en compte des bordures différentes suivant les navigateurs, beaucoup de polémique à ce sujet d'ailleurs et d'ici.
Pour en revenir à mon égarement du début juste un petit code pour test <html> <head> <script type="text/javascript"> function Show_Info( id_){ var O_Div = document.getElementById( id_); var Larg = O_Div.offsetWidth; var Haut = O_Div.offsetHeight; alert( "offset : \nLargeur = " +Larg +"\nHauteur = " +Haut); var Larg = O_Div.clientWidth; var Haut = O_Div.clientHeight; alert( "client : \nLargeur = " +Larg +"\nHauteur = " +Haut); } </script> </head> <body> <div id = "D_TEST" style = "width:3.0em; font-size:20px; border:1px solid red;">Texte</div> <input type = "button" value="UP Font" onclick = "document.getElementById('D_TEST').style.fontSize='40px';"><br> <input type = "button" value="Show" onclick = "Show_Info('D_TEST');"> </body> </html> encore un test juste pour le FUN, mettez un texte avec des espaces dans le DIV.
;O)
|
|
Cette discussion est classée dans : document, em, strvalue, strcssrule, oelm
Répondre à ce message
Sujets en rapport avec ce message
Compatibilite [ par JB ]
A grand dieu pardonnez moi de mon ignorance ! Plus serieusement, je suisdebutant programmeur (etudiant en BTS d'info, je n'avais que quelques basesde
Récupérer l'adresse d'un document [ par Kariboo ]
Comment récupérer l'adresse du document présent dans la fenêtre principale en exécutant un script EXTERIEUR: Il s'agit en fait d'un script présent dan
Capturer la sélection d'une liste Box [ par OlivierR ]
Bonjour tout le monde !Je suis débutant en JavaScript et je voudrais savoir comment capturer le choix de l'utilisateur d'une liste Box. Sa déclaration
Aide a decrypté [ par Wab ]
bonjour, quelqu'un peux m'aider a decrypté ca? :function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -
aide pour un jv-sc qui test des champs [ par Moussetique ]
function VerifForm() { adresse = document.krucial.email.value; motdp = document.krucial.mdp.value; var place = adresse.indexOf("@",1); var point = adr
de l aide please [ par ibompuis ]
voila je souhaiterais afficher dans plusieurs tableaux des images que je pourrai recharger avec un boutonj ai trouve ce script mais je ne sais pas co
Cases à cocher [ par lavache13 ]
Je suis en train de faire un formulaire avec des cases à cocher et j'aimerai savoir ce que retourne une case à cocher comme valeur. J'ai essayé checke
Je ne comprends pas [ par Robbie ]
Salut, j'ai un formulaire dans ce formulaire j'ai une liste déroulante : avec function liste_changee(){ document.formulaire.metho
JavaScript utilisée dans PHP [ par Chinatraveler ]
BonjourDans une même page *.php mêlant PHP et javascript, je souhaite utiliser l'objet "document.referrer" dans une condition "if" PHP.Est-ce possible
Passage de variable entre fenetres... [ par baddack ]
J'ai deux fentres et je veux envoyer des infos de l'une a l'autre!!Par exemple si je click sur un lien de la fenetre1, appeler une fonction du genre :
Livres en rapport
|
Derniers Blogs
TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc
Logiciels
DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|