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
UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|