jQuery

Question

我试着让宽度和高度相同。

我的代码

var getWidth = ($(".square").width());
$('.square').css('height',getWidth +'px');

但是当我调整大小时 window 它不起作用。

我需要使用 jquery 或 sass 的方法。

认为

Answer 1

var getWidth = $(".square").width();
$('.square').css('height',getWidth);

$( window ).resize(function() {
 var getWidth = $(".square").width();
$('.square').css('height',getWidth);   
});

Answer 2

function getsquare(){
var getWidth = $(".square").width();
$('.square').css('height',getWidth +'px');
}
getsquare();
$(window).resize(function(){
getsquare()
});

以上代码在 fiddle.

中完美运行

Answer 3

此脚本不会使宽度永远等于高度，它只是获取宽度值并分配给高度。您需要再次从对象中获取宽度并在调整大小事件中分配给高度。

将其包装在函数中并在当前流程和调整大小事件中调用该函数的最佳方式。

function assignWidthtoHeight(){
var getWidth = ($(".square").width());
$('.square').css('height',getWidth +'px');
 }

assignWidthtoHeight();

$( window ).resize(function() {
assignWidthtoHeight();
});

Answer 4

你可以试试这个重新排列的代码，你必须稍微改变一下你的代码。我们需要用第二个括号编写 .css() 函数。

var getWidth = $(".square").width();
$('.square').css({height: getWidth+'px'});

http://jsfiddle.net/xf7kjcf6/19/

Answer 5

如果要更新正方形，则需要为页面调整大小时创建事件处理程序。

jQuery: .on('resize', handler) or .resize(handler).

Example

JS

function squareSize (e) {
  var sq = $('.square');
      sq.css('height', sq.width());        
}

squareSize();

$(window).on('resize', squareSize);

jQuery 文档：http://api.jquery.com/

jQuery - 使高度值与宽度值相同

jQuery - Make hight value is the same width value

resize

window-resize