So stellen Sie Breite und Höhe mithilfe von jQuery dynamisch ein

Ich möchte die Breite und Höhe des divElements dynamisch mit jQuery einstellen .

Ich habe versucht zu ersetzen

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

mit diesem:

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

aber es funktioniert nicht bei mir.

Bitte helfen Sie zu verstehen, warum.

Danke euch allen !

Das Problem war mit den Anführungszeichen auf Zahlen. Das funktioniert gut:

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

Du kannst das:

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

Dies hat 2 Änderungen, es verwendet jetzt .width()und .height()führt den Code für das document.readyEreignis aus.

Ohne den $(function() { })Wrapper (oder $(document).ready(function() { })wenn Sie es vorziehen) ist Ihr Element möglicherweise noch nicht vorhanden $("#mainTable"). Hier sehen Sie ein Arbeitsbeispiel .

Da @Misha Moroshko sich bereits selbst gepostet hat, funktioniert dies:

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

Diese Technik hat einen gewissen Vorteil gegenüber der von @Nick Craver akzeptierten Antwort - Sie können auch verschiedene Einheiten angeben:

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

Daher ist die Methode von @Nick Craver für einige Benutzer möglicherweise die falsche Wahl . Über die jquery-API ( http://api.jquery.com/width/ ):

Der Unterschied zwischen .css (width) und .width () besteht darin, dass letzterer einen Pixelwert ohne Einheit (z. B. 400) zurückgibt, während ersterer einen Wert mit intakten Einheiten (z. B. 400px) zurückgibt. Die Methode .width () wird empfohlen, wenn die Breite eines Elements für eine mathematische Berechnung verwendet werden muss.

Versuche dies:

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

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

Ich habe unten Code versucht, es hat gut funktioniert

var modWidth = 250;
var modHeight = 150;

Beispiel unten: -

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

oder verwenden Sie diese Syntax:

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

Ich habe alle oben genannten Vorschläge ausprobiert und keiner von ihnen hat für mich funktioniert. Sie haben die clientWidth und clientHeight geändert, nicht die tatsächliche Breite und Höhe.

In den jQuery-Dokumenten für die Methoden $ (). Width und height heißt es: "Beachten Sie, dass .width (" value ") die Inhaltsbreite der Box unabhängig vom Wert der CSS-Box-Sizing-Eigenschaft festlegt."

Der CSS-Ansatz hat das Gleiche getan, daher musste ich stattdessen die Methoden $ (). Attr () verwenden.

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

Ich weiß nicht, ob mich das betrifft, weil ich versucht habe, die Größe eines Elements zu ändern, und es ist etwas anders oder nicht.

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