javascript - jQuery 为元素设置自定义尺寸

Question

我有一个 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/

Answer 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});
});

您的变量范围已关闭。

Answer 2

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

Answer 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});
});

演示

Answer 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');
    });

Answer 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});
});