Comment définir dynamiquement la largeur et la hauteur à l'aide de jQuery

Question

J'aimerais définir dynamiquement la largeur et la hauteur de l'élément div aide de jQuery.

J'essayais de remplacer

 <div id="mainTable" style="width:100px; height:200px;"></div>
 

avec ça:

 $("#mainTable").css("width", "100");
$("#mainTable").css("height", "200");
 

mais ça ne marche pas pour moi.

S'il vous plaît aider à comprendre pourquoi.

Merci à tous !

Le problème était avec les guillemets sur les chiffres. Cela fonctionne bien:

 $("#mainTable").css("width", 100);
$("#mainTable").css("height", 200);
 

Answer 1

Vous pouvez faire ceci:

$(function() {
  $("#mainTable").width(100).height(200);
});

Cela a 2 changements, il utilise maintenant .width() et .height(), ainsi qu'exécute le code sur l' document.ready événement.

Sans l' $(function() { }) wrapper (ou $(document).ready(function() { }) si vous préférez), votre élément ne peut pas être présent encore, $("#mainTable") seulement de ne pas trouver quelque chose de...enfin, de faire des trucs pour. Vous pouvez voir un exemple ici.

Answer 2

Essaye ça

 <div id="mainTable" style="width:100px; height:200px;"></div> 

$(document).ready(function() {
  $("#mainTable").width(100).height(200);
}) ;
 

J'espère que ça peut vous aider.

Answer 3

J'ai essayé ci-dessous le code de son travail pour bien

 var modWidth = 250;
var modHeight = 150;
 

exemple ci-dessous: -

 $( "#ContainerId .sDashboard li" ).width( modWidth ).height(modHeight);
 

Answer 4

ou utilisez cette syntaxe:

 $("#mainTable").css("width", "100px");
$("#mainTable").css("height", "200px");
 

Answer 5

J'ai essayé toutes les suggestions ci-dessus et aucun d'entre eux travaillaient pour moi, ils ont changé le clientWidth et clientHeight pas la largeur et la hauteur.

Le jQuery docs pour $().la largeur et la hauteur des méthodes dit: "notons que .largeur("valeur") définit le contenu de la largeur de la boîte, indépendamment de la valeur de la propriété CSS box-sizing de la propriété."

Le css approche a fait la même chose donc j'ai dû utiliser le $().attr() méthodes à la place.

_canvas.attr('width', 100);
_canvas.attr('height', 200);

Je ne sais pas est-ce sur moi parce que j'ai essayé de redimensionner un élément et c'est d'une façon différente ou pas.