Question

我对jQuery和JS世界都很陌生，所以请原谅我的无知。我正在尝试获得.grid-sarah的宽度，以便我可以将内容集中在其中。除了（heightFix-30）之外的所有工作正常，它不会认识到它正在做-30px而不是-30？当我将它除以4时，var textIndent也不起作用。我不认为显示我的CSS和HTML是必要的让我知道。

脚本

 function squares(){
  var heightFix = $('.grid-sarah').css('width');
  var heightFixer = (heightFix-30);
  var textIndent = (heightFix/4); 
    $('figure.effect-sarah').height(heightFixer); //-30px off
    $('figure.effect-sarah h2').css('line-height', heightFix);
    $('figure.effect-sarah h2').css('text-indent', textIndent);
    // $('figure.effect-sarah h2').css('margin-left', '25%');
};

  squares();

$( window ).resize(function() {
  squares();
  return false;
});

Answer 1

$('.grid-sarah').css('width')最后添加px。

改为使用$('.grid-sarah').width()。

$('.grid-sarah').width()将返回width in（int）像素，而不会在末尾添加px。

所以你的函数squares()变为：

function squares(){
  var heightFix = $('.grid-sarah').width();
  var heightFixer = (heightFix-30);
  var textIndent = (heightFix/4); 
    $('figure.effect-sarah').height(heightFixer); //-30px off
    $('figure.effect-sarah h2').css('line-height', heightFix+"px");
    $('figure.effect-sarah h2').css('text-indent', textIndent+"px");
    // $('figure.effect-sarah h2').css('margin-left', '25%');
}

用.css Jquery做简单的数学运算

1 个答案: