jQuery 为元素设置自定义尺寸答案

【问题标题】：jQuery set custom dimensions for an elementjQuery 为元素设置自定义尺寸
【发布时间】：2012-09-13 08:45:40
【问题描述】：

我有一个 div，我想使用两个文本输入设置自定义尺寸。

<div id="theFrame"></div>
    width: <input id="custWidth" type="text">
    height: <input id="custHeight" type="text">
<br>
<button id="custSet">Set my width!</button>

我试过用变量来设置高度和宽度，但我现在不知道该怎么做。

var frame = $('div#theFrame');

$("#custWidth")
    .keyup(function () {
        var custWidth = $(this).attr('value');
    })
    .keyup();

$("#custHeight")
    .keyup(function () {
        var custHeight = $(this).attr('value');
    })
    .keyup();

$('#custSet')
    .click( function() {
        frame.css({height: custHeight, width: custWidth});
    });

谢谢。

http://jsfiddle.net/Kyle_Sevenoaks/6MUuv/

【问题讨论】：

标签： javascript jquery html dimensions

【解决方案1】：

var frame = $('div#theFrame');
var custWidth;
var custHeight;
$("#custWidth").keyup(function () {
      custWidth = $(this).attr('value');
    }).keyup();

$("#custHeight").keyup(function () {
      custHeight = $(this).attr('value');
    }).keyup();

$('#custSet').click( function() {
    frame.css({height: custHeight, width: custWidth});
});

您的变量范围已关闭。

【讨论】：

【解决方案2】：

您的问题是宽度和高度的那些变量是有范围的。您需要在事件处理程序之外定义它们，然后在没有var 的情况下将它们设置在它们之前。

【讨论】：

【解决方案3】：

在外部范围内声明你的变量：

var frame = $('div#theFrame');
var custWidth = 40;  // declared outside and assigned a default value
var custHeight = 40; // declared outside and assigned a default value

$("#custWidth").keyup(function () {
      custWidth = $(this).attr('value');
    }).keyup();

$("#custHeight").keyup(function () {
     custHeight = $(this).attr('value');
    }).keyup();

$('#custSet').click( function() {
    //frame.height(custHeight); // Alternative to .css() if you like, also doesn't need 'px' as it always is in pixels.
    //frame.width(custWidth);  // Alternative to .css() if you like, also doesn't need 'px' as it always is in pixels.
    frame.css({height: custHeight, width: custWidth});
});

DEMO

【讨论】：

@KyleSevenoaks：很好，更新后复制了错误的 URL :) 谢谢。

【解决方案4】：

您很可能需要在设置 CSS 时包含“px”：

frame.css({height: custHeight + 'px', width: custWidth + 'px'});

此外，您需要全局定义 custHeight 和 custWidth 参数，因为它们仅在 key up 函数中是本地的。

var frame = $('div#theFrame'), custWidth = 0, custHeight = 0;

$("#custWidth")
    .keyup(function () {
        window.custWidth = $(this).attr('value');
    })
    .keyup();

而且...我相信您不需要第二次 keyup() 调用：

$("#custWidth")
    .keyup(function () {
        window.custWidth = $(this).attr('value');
    });

【讨论】：

如果您使用frame.height(cutHeight) 和frame.width(custWidht)，则无需担心px，因为这些jQuery 方法总是使用像素。

【解决方案5】：

只需将两个变量设为全局 custWidth,custHeight

var frame = $('div#theFrame');
var custWidth,custHeight ;
$("#custWidth").keyup(function () {
      custWidth = $(this).attr('value');
}).keyup();

$("#custHeight").keyup(function () {
      custHeight = $(this).attr('value');
}).keyup();

$('#custSet').click( function() {
    frame.css({height: custHeight, width: custWidth});
});

【讨论】：