Retour à Forum de programmation

Javascript Obtenir un courant Divs Largeur

  • Ginja_Ninja
  • Student
  • Student
  • No Avatar
  • Inscription: Déc 09, 2004
  • Messages: 89
  • Loc: UK
  • Status: Offline

Message Février 17th, 2005, 3:47 am

Salut je veux faire une fonction javascript qui ajoute, à 10 par exemple à la largeur d'un élément div.

Je ne suis pas sûr de savoir comment obtenir la largeur actuelle.

Any thoughts?

TakeCare

G_N
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Février 17th, 2005, 3:47 am

  • katana
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Sep 07, 2004
  • Messages: 2390
  • Loc: Edinburgh, Scotland
  • Status: Offline

Message Février 17th, 2005, 4:15 am

Donnez votre div une pièce d'identité afin que vous puissiez y accéder facilement, et ensuite utiliser le "style" de propriété pour obtenir la largeur:
Code: [ Select ]
var mydiv = document.getElementById("mydiv");
var curr_width = mydiv.style.width;
// now add 10 to the width
mydiv.style.width = curr_width + 10;
  1. var mydiv = document.getElementById("mydiv");
  2. var curr_width = mydiv.style.width;
  3. // now add 10 to the width
  4. mydiv.style.width = curr_width + 10;
Why do geeks get Halloween and Christmas confused?
Because 31 Oct == 25 Dec
www.darren-king.co.uk
  • katana
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Sep 07, 2004
  • Messages: 2390
  • Loc: Edinburgh, Scotland
  • Status: Offline

Message Février 17th, 2005, 4:40 am

Si vous avez essayé l'exemple ci-dessus, vous mai être des problèmes avec le code. Elle mai travail dans IE, mais Firefox ne l'aime pas. Réglage de la largeur initiale DIV en utilisant le CSS ne fonctionne pas pour une raison quelconque - Firefox renvoie une valeur NULL pour le style.width "attribut". Pour contourner ce problème, définissez la largeur initiale de la DIV dans le "style" attribut de la balise DIV. Cela garantira que Firefox obtient une valeur pour la largeur initiale.
Heres le code que j'ai utilisé pour le test:
Code: [ Select ]
<html>
<head>
<style type="text/css">
div#mydiv {
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<script language="JavaScript">
function addWidth() {
    var mydiv = document.getElementById("mydiv");
    var curr_width = parseInt(mydiv.style.width); // removes the "px" at the end
    mydiv.style.width = (curr_width + 10) +"px";
}
</script>
</head>
<body>
<input type="button" value="Make Bigger" onclick="addWidth()" />
<div id="mydiv" style="width:100px"></div>
</body>
</html>
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div#mydiv {
  5.     width: 100px;
  6.     height: 100px;
  7.     background-color: red;
  8. }
  9. </style>
  10. <script language="JavaScript">
  11. function addWidth() {
  12.     var mydiv = document.getElementById("mydiv");
  13.     var curr_width = parseInt(mydiv.style.width); // removes the "px" at the end
  14.     mydiv.style.width = (curr_width + 10) +"px";
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <input type="button" value="Make Bigger" onclick="addWidth()" />
  20. <div id="mydiv" style="width:100px"></div>
  21. </body>
  22. </html>
Why do geeks get Halloween and Christmas confused?
Because 31 Oct == 25 Dec
www.darren-king.co.uk
  • Ginja_Ninja
  • Student
  • Student
  • No Avatar
  • Inscription: Déc 09, 2004
  • Messages: 89
  • Loc: UK
  • Status: Offline

Message Février 17th, 2005, 5:15 am

un mot - PERFECT -

Merci beaucoup de bonnes thatsreally

Prendre soin de

G_N
  • RichB
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Mai 17, 2003
  • Messages: 1121
  • Loc: Boston
  • Status: Offline

Message Février 17th, 2005, 5:16 am

Ouais, vous ne pouvez pas récupérer les valeurs en utilisant le style ob.style.width moins theyve été mis en utilisant un style en ligne. Il ya un moyen de contourner ce que j'ai rencontré l'an dernier tout en travaillant sur un problème avec quelqu'un d'autre ici à Ozzu. Il permettra de récupérer la valeur si elle a été mise en ligne ou dans une embarqués ou externes (je crois), feuille de style, mais la valeur doit être définie via css avant que la fonction est appelée parce que IE renverra une valeur de chaîne «Auto» plutôt que la valeur calculée de la largeur réelle que Mozilla sera de retour si vous ne définissez pas la valeur quelque part.

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function getStyle(el, style) {
  if(!document.getElementById) return;
 
   var value = el.style[toCamelCase(style)];
 
  if(!value)
    if(document.defaultView)
      value = document.defaultView.
         getComputedStyle(el, "").getPropertyValue(style);
   
    else if(el.currentStyle)
      value = el.currentStyle[toCamelCase(style)];
  
   return value;
}

function setStyle(objId, style, value) {
  document.getElementById(objId).style[style] = value;
}

function toCamelCase( sInput ) {
  var oStringList = sInput.split('-');
  if(oStringList.length == 1)  
    return oStringList[0];
  var ret = sInput.indexOf("-") == 0 ?
      oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1) : oStringList[0];
  for(var i = 1, len = oStringList.length; i < len; i++){
    var s = oStringList[i];
    ret += s.charAt(0).toUpperCase() + s.substring(1)
  }
  return ret;
}

function increaseWidth(addToWidth, whichDiv){
  var theDiv = document.getElementById(whichDiv);
  var currWidth = parseInt(getStyle(theDiv, "width"));
  var newWidth = currWidth + parseInt(addToWidth);
  setStyle(whichDiv, "width", newWidth + "px");
}
// -->
</script>
<style type="text/css">
<!--
.testDiv {width: 200px; background-color:#ccc }
-->
</style>
</head>
<body>
<div id="test" style="width:200px; background-color:#ccc">Yada</div>
<div id="test2" class="testDiv">Yada</div>

<form name="testForm" action="">
<label> Add: <input name="newWidth" value="10" type="text" /></label><br>
<label> Add: <input name="testDiv" value="test" type="text" /></label><br>
<input type="button" value="Add to Width" onclick="increaseWidth(document.testForm.newWidth.value, document.testForm.testDiv.value)" />
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script type="text/javascript">
  5. <!--
  6. function getStyle(el, style) {
  7.   if(!document.getElementById) return;
  8.  
  9.    var value = el.style[toCamelCase(style)];
  10.  
  11.   if(!value)
  12.     if(document.defaultView)
  13.       value = document.defaultView.
  14.          getComputedStyle(el, "").getPropertyValue(style);
  15.    
  16.     else if(el.currentStyle)
  17.       value = el.currentStyle[toCamelCase(style)];
  18.   
  19.    return value;
  20. }
  22. function setStyle(objId, style, value) {
  23.   document.getElementById(objId).style[style] = value;
  24. }
  26. function toCamelCase( sInput ) {
  27.   var oStringList = sInput.split('-');
  28.   if(oStringList.length == 1)  
  29.     return oStringList[0];
  30.   var ret = sInput.indexOf("-") == 0 ?
  31.       oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1) : oStringList[0];
  32.   for(var i = 1, len = oStringList.length; i < len; i++){
  33.     var s = oStringList[i];
  34.     ret += s.charAt(0).toUpperCase() + s.substring(1)
  35.   }
  36.   return ret;
  37. }
  39. function increaseWidth(addToWidth, whichDiv){
  40.   var theDiv = document.getElementById(whichDiv);
  41.   var currWidth = parseInt(getStyle(theDiv, "width"));
  42.   var newWidth = currWidth + parseInt(addToWidth);
  43.   setStyle(whichDiv, "width", newWidth + "px");
  44. }
  45. // -->
  46. </script>
  47. <style type="text/css">
  48. <!--
  49. .testDiv {width: 200px; background-color:#ccc }
  50. -->
  51. </style>
  52. </head>
  53. <body>
  54. <div id="test" style="width:200px; background-color:#ccc">Yada</div>
  55. <div id="test2" class="testDiv">Yada</div>
  57. <form name="testForm" action="">
  58. <label> Add: <input name="newWidth" value="10" type="text" /></label><br>
  59. <label> Add: <input name="testDiv" value="test" type="text" /></label><br>
  60. <input type="button" value="Add to Width" onclick="increaseWidth(document.testForm.newWidth.value, document.testForm.testDiv.value)" />
  61. </form>
  62. </body>
  63. </html>


Vous pouvez le tester en changeant la div à partir du "test", pour "test2" - la première utilise un style en ligne et le second d'une classe dans une feuille de style incorporée. Toutefois, si vous supprimez la valeur de largeur dans le CSS pour dire soit div signale une erreur et arrêter le script. Je ne pense pas theres de toute façon autour de ce parce que je ne pense pas que vous pouvez récupérer la valeur auto calculé à partir de IE, mais il faut que le travail tant que la div a une valeur CSS initiale pour la largeur, indépendamment du fait que le CSS dans inline, embarqué ou externe.

Le code pour les fonctions qui obtenir et définir les styles venus d'ici:

http://dhtmlkitchen.com/learn/js/setstyle/index4.jsp
http://dhtmlkitchen.com/learn/js/setstyle/index3.jsp
Free Programming Resources
  • katana
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Sep 07, 2004
  • Messages: 2390
  • Loc: Edinburgh, Scotland
  • Status: Offline

Message Février 17th, 2005, 5:19 am

Un sujet intéressant. J'ai eu mon premier bloc de script avant de bloquer mon CSS, j'ai échangé les deux autour d'eux pour voir si cela peut faire une différence, mais non.
Why do geeks get Halloween and Christmas confused?
Because 31 Oct == 25 Dec
www.darren-king.co.uk
  • RichB
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Mai 17, 2003
  • Messages: 1121
  • Loc: Boston
  • Status: Offline

Message Février 17th, 2005, 5:23 am

Oui, ces fonctions sont en pratique une ou deux fois, mais ils doivent faire des essais avec les différentes valeurs en raison des divers navigateur quirks. Par exemple, c'est-à-dire le retour des couleurs comme hex triplets ou littérale des valeurs comme «bleu» - en gros ce que vous attribuez, mais mozilla les retourne comme une RBG (100, 100, 100) quel que soit le style de chaîne de la façon dont vous définissez la propriété initialement.
Free Programming Resources
  • katana
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Sep 07, 2004
  • Messages: 2390
  • Loc: Edinburgh, Scotland
  • Status: Offline

Message Février 17th, 2005, 5:59 am

Un jour, Firefox et IE travaillent ensemble en parfaite harmonie. Pour une indication de ce jour, cliquez sur ici
Why do geeks get Halloween and Christmas confused?
Because 31 Oct == 25 Dec
www.darren-king.co.uk
  • RichB
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Mai 17, 2003
  • Messages: 1121
  • Loc: Boston
  • Status: Offline

Message Février 17th, 2005, 6:11 am

heheh, j'avais besoin d'un éclat de rire. merci :)
Free Programming Resources
  • dimat
  • Student
  • Student
  • Avatar de l’utilisateur
  • Inscription: Aoû 02, 2006
  • Messages: 67
  • Loc: Kiev, Ukraine
  • Status: Offline

Message Janvier 28th, 2008, 3:40 am

J'ai trouvé une autre solution:
div a offsetWidth bien:
Code: [ Select ]
document.getElementsByTagName("div")["someDiv"].offsetWidth

Sorcière représente sa largeur réelle. mais! il est vrai qu'après tout le contenu est téléchargé en div. Par exemple, si elle contient l'image:
Code: [ Select ]
<div id="someDiv"><img src="1024x768.png" /></div>

vous pouvez obtenir la largeur 40, parce que, jusqu'à l'image n'est pas téléchargé, il est remplacé par le symbole de la largeur de l'image sorcière est de 40. donc si vous voulez calcutate tous widthes d'images sur le site, youd mieux le faire en cas d'événement onLoad.
Code: [ Select ]
<body onLoad="CalculateAllImageWidthes()">
....
</body>
  1. <body onLoad="CalculateAllImageWidthes()">
  2. ....
  3. </body>

PS offsetWidth est défini non seulement pour les éléments DIV et fonctionne pour tous les types de navigateurs.
  • katana
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Sep 07, 2004
  • Messages: 2390
  • Loc: Edinburgh, Scotland
  • Status: Offline

Message Janvier 28th, 2008, 6:32 am

Haha, si seulement j'avais su alors ce que je sais maintenant! Quand j'ai lu le titre de ce post, je me suis dit: - "Facile, l'utilisation" offsetWidth "", puis j'ai vu que j'avais effectivement répondu à cela en premier lieu!

Oui, si je répond maintenant, Id vous suggérons d'utiliser offsetWidth. Utilisation de "style.width" ne fonctionne que si vous réglez la largeur via CSS, en premier lieu, ce qui n'est pas une solution idéale, surtout si vous définissez la largeur en utilisant les pourcentages etc
Why do geeks get Halloween and Christmas confused?
Because 31 Oct == 25 Dec
www.darren-king.co.uk
  • dimat
  • Student
  • Student
  • Avatar de l’utilisateur
  • Inscription: Aoû 02, 2006
  • Messages: 67
  • Loc: Kiev, Ukraine
  • Status: Offline

Message Janvier 28th, 2008, 7:22 am

ce lien va en premier neerly google "javascript div largeur", alors j'ai décidé qu'il serait bon que visiteurs trouveront réponse ici
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Janvier 28th, 2008, 3:09 pm

J'ai d'abord pensé Id être bloqué pour le moment un autre thread vieux étant bumped pour le spam.

Ceci est un bon exemple de la supplantation en fils anciens n'est pas une si mauvaise idée.

Curieux de ce que Im,
Code: [ Select ]
document.getElementsByTagName("div")["someDiv"].offsetWidth


Vous pouvez accéder à un des éléments d'identification spécifique de getElementsByTagName comme ça?
Je ne pensais qu'à l'index numérique était disponible cross-browser.
Code: [ Select ]
document.getElementsByTagName("div")[0].offsetWidth
Strong with this one, the sudo is.
  • katana
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Sep 07, 2004
  • Messages: 2390
  • Loc: Edinburgh, Scotland
  • Status: Offline

Message Janvier 29th, 2008, 2:46 am

Hmm, je ne pense pas que la syntaxe de travail, soit, mais sur la réflexion à ce sujet, je ne vois aucune raison qu'il wouldnt. Je n'avais jamais utilisé juste avant. Je viens d'essayer dans Firefox, Opera et Internet Explorer 6, et il semble fonctionner correctement. Je suppose thats un peu plus robuste que la simple spécification de l'indice de l'article que vous souhaitez modifier (indice est le plus susceptible de changer que l'élément ID).

Apprendre quelque chose de nouveau tous les jours.
Why do geeks get Halloween and Christmas confused?
Because 31 Oct == 25 Dec
www.darren-king.co.uk
  • josepharistotil
  • Born
  • Born
  • No Avatar
  • Inscription: Sep 13, 2008
  • Messages: 1
  • Status: Offline

Message Septembre 13th, 2008, 1:06 am

Êtes-vous essayer cela comme suit?
pour trouver la largeur
Code: [ Select ]
document.getElementById("<DivName>").offsetWidth;

pour Ronaldinho vs hauteur
Code: [ Select ]
document.getElementById("<DivName>").offsetHeight;
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Septembre 13th, 2008, 1:06 am

1, 2

Afficher de l'information

  • Total des messages de ce sujet: 18 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 279 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC