Как задать ширину и высоту динамически с помощью jQuery

Я хотел бы установить ширину и высоту div элемент динамически с помощью jQuery.

Я пытался заменить

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

С этого:

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

но это не работает для меня.

пожалуйста, помогите понять, почему.

спасибо всем !

проблема была с кавычками на цифрах. Это прекрасно работает:

$("#mainTable").css("width", 100);
$("#mainTable").css("height", 200);
6 62
html jquery

6 ответов:

вы можете сделать это:

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

это имеет 2 изменения, теперь он использует .width() и .height(), а также запускает код на document.ready событие.

без $(function() { }) фантик (или $(document).ready(function() { }) если вы предпочитаете), ваш элемент может не присутствовать, так что $("#mainTable") просто не нашел бы ничего...ну, заняться делами. вы можете увидеть рабочий пример здесь.

86

как @Миша "Морошко" уже разместил сам, это работает:

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

есть некоторое преимущество этой техники над принятым ответом @Nick Craver - вы также можете указать различные единицы:

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

Так метод@Nick Craver на самом деле может быть неправильным выбором для некоторых пользователей. Из API jquery (http://api.jquery.com/width/):

разницу между .в CSS(width) и .ширина() заключается в том, что последний возвращает значение пикселя без единицы (например, 400), в то время как первый возвращает значение с неповрежденными единицами (например, 400px). Этот.метод width () рекомендуется, когда ширина элемента должна использоваться в математическом расчете.

13

Я пробовал ниже код его работал для штрафа

var modWidth = 250;
var modHeight = 150;

пример :-

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

попробуйте это:

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

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

или использовать следующий синтаксис:

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

я попробовал все предложения выше, и ни один из них не работал для меня, они изменили clientWidth и clientHeight не фактическую ширину и высоту.

документы jQuery для $().методы ширины и высоты говорят: "обратите внимание .width ("value") задает ширину содержимого поля независимо от значения свойства CSS box-sizing."

С помощью CSS сделал то же самое, поэтому мне пришлось использовать $().вместо этого используются методы attr ().

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

Я не знаю это повлияйте на меня, потому что я пытался изменить размер элемента, и это несколько отличается или нет.

2