修改JavaScript以访问变量

Question

我正在玩一些代码，根据div的大小放大文本。可以在这里看到：

http://codepen.io/anon/pen/zZqXXd

$(function() {

  var outer = $('div'), inner = $('h1'),
  difference = outer.width()-inner.width(),
  ratio = outer.width()/inner.width(),
  style = 'translateX(' + difference/2 + 'px) ' + 'scale(' + ratio + ')';
  inner.css({'webkit-transform': style, transform: style});
});

但是，我正在尝试修改它以使用大小为的变量，而不是从div获取它。这是我的尝试似乎不起作用：

$(function() {

  var width = "400",
  var inner = $('h1'),
  difference = width -inner.width(),
  ratio = width /inner.width(),
  style = 'translateX(' + difference/2 + 'px) ' + 'scale(' + ratio + ')';
  inner.css({'webkit-transform': style, transform: style});
});

Answer 1

您必须使用分号替换','后的逗号（var width = "400"）。您当前的代码会引发语法错误。

更正后的代码为：

$(function() {

  var width = "400"; // <-----
  var inner = $('h1'),
  difference = width -inner.width(),
  ratio = width /inner.width(),
  style = 'translateX(' + difference/2 + 'px) ' + 'scale(' + ratio + ')';
  inner.css({'webkit-transform': style, transform: style});
});