Retour à Forum de programmation

Javascript Obtenir un courant Divs Largeur

  • mlarson154
  • Novice
  • Novice
  • Avatar de l’utilisateur
  • Inscription: Juin 23, 2005
  • Messages: 15
  • Loc: Utah, USA
  • Status: Offline

Message Octobre 7th, 2009, 1:08 pm

Je sais que c'est un ancien poste, mais Ive a vu beaucoup de posts sur de nombreux forums concernant la modification de la largeur de VIA. Style.width sans aucune réponse claire pour expliquer pourquoi il ne fonctionne pas. Ce que j'ai constaté, c'est que le <div> devez charger avant de pouvoir le changer, donc appeler votre fonction dans l'en-tête ne retourne rien, puisque le <div> lui-même n'a pas été chargé.

Par conséquent, appelez votre fonction après le <div>:
Code: [ Select ]
<head>
<script type="text/javascript"> function WidthChange()
{
document.getElementById("DivName").style.width = '100px';
}
</script>
</head>
<body>
<div id="DivName">
<script type="text/javascript">WidthChange()</script>
...
  1. <head>
  2. <script type="text/javascript"> function WidthChange()
  3. {
  4. document.getElementById("DivName").style.width = '100px';
  5. }
  6. </script>
  7. </head>
  8. <body>
  9. <div id="DivName">
  10. <script type="text/javascript">WidthChange()</script>
  11. ...


Vous pouvez spécifier l'appel de fonction à tout moment après la ligne div, ainsi vous pouvez le déposer près de la balise </ body> si vous voulez.

C'est ainsi que j'ai compris que je pouvait utiliser. Style.width. N'importe qui ont une correction à cela? Je n'ai pas trouvé manière que ce soit pour rendre la fonction d'appel avant la ligne div.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Octobre 7th, 2009, 1:08 pm

  • creatino
  • Born
  • Born
  • No Avatar
  • Inscription: Oct 29, 2009
  • Messages: 1
  • Status: Offline

Message Octobre 29th, 2009, 12:22 pm

Hé les gars,

Merci pour les deux méthodes, à la fois du sens et étaient les seuls résultats utiles après googler bien. Im assez nouveau pour JS CSS et mais une bonne actionscripter.

Im tester les deux méthodes et semblent être l'obtention des valeurs différentes d'eux. En plus de cela, Firefox 3.5.4 ne veut pas me montrer les deux alertes suivantes à l'aide Im tout en testant: Safari-t-il amende. Toutes les idées qui pourraient être pourquoi? J'ai besoin de cette valeur comme base pour une animation js.

HTML Code: [ Select ]
<script type="text/javascript">
   alert(getStyle(item3, "width"));
   alert(document.getElementById("item1").offsetWidth);
</script>
  1. <script type="text/javascript">
  2.    alert(getStyle(item3, "width"));
  3.    alert(document.getElementById("item1").offsetWidth);
  4. </script>


Aide appréciée, Merci!
Moderator Remark: Added [code] tags
  • dbind
  • Born
  • Born
  • No Avatar
  • Inscription: Oct 22, 2010
  • Messages: 1
  • Status: Offline

Message Octobre 22nd, 2010, 9:35 am

@ RichB: votre toCamelCase () fonction pourrait être grandement amélioré et simplifié, en utilisant des expressions régulières:

toCamelCase fonction (sInput) {
sInput.replace retour (/-([ a-zA-Z]) / fonction g, (s, s1) {
s1.toUpperCase return ();
});
};

J'espère que ça aide quelqu'un.

[Quote = "RichB"] Ouais, vous ne pouvez pas récupérer les valeurs en utilisant le style ob.style.width moins theyve été réglée en utilisant un style en ligne. Il ya un moyen de contourner ce que je suis tombé sur 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 feuille de style incorporée ou externe (je crois), mais la valeur doit être réglée via css avant que la fonction est appelée parce que IE va retourner 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 de "test" à "test2" - la première utilise un style en ligne et la seconde une classe dans une feuille de style incorporée. Toutefois, si vous supprimez la valeur de largeur dans le css pour IE soit div signale une erreur et arrêter le script. Je ne pense pas que theres toute façon autour de cela parce que je ne pense pas que vous pouvez récupérer la valeur de l'automobile calculée à partir de IE, mais cela devrait fonctionner aussi longtemps que le div a une valeur initiale de css pour la largeur, indépendamment du fait que le CSS en ligne, intégré ou externe.

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

[...]
[...]

1, 2

Afficher de l'information

  • Total des messages de ce sujet: 18 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 101 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