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

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() 将以 (int) 像素返回 width 而不添加 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%');
}