Question

我看不出这段代码有什么问题。计算窗口的中心位置然后转换 - 转换div（必须使用translate来做我正在做的事情）。

刚开始使用Chrome，因此-webkit-前缀。

为什么jQuery不将内联样式应用于.logo div非常困惑。已经包括我的其他故障排除实验，评论说。

语法问题？ jsfiddle here。

var centerPosition = '';

function centerLogo(){
  var w_width = $(window).width();
  var w_height = $(window).height();
  var hCenter = (w_width / 2) - 150;
  var vCenter = (w_height / 2) - 150;
    console.log(hCenter);
    console.log(vCenter);
  var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';
    console.log(centerPosition);
  $('.logo').css('-webkit-transform', centerPosition);

  // Try uncommenting the three examples below - they all work ...

  // $('.logo').css('background', 'blue');

  // centerPosition = 'blue';
  // $('.logo').css('background', centerPosition);

  // $('.logo').css('-webkit-transform', 'translate(10.85px, 45.56px)');

}

jQuery(document).ready(function($){
  centerLogo();
});

Answer 1

$('.logo').css('-webkit-transform', centerPosition);的正确语法在字符串中没有分号。尝试更改此内容：

var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';

到此：

var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px)';

应该有效：http://jsfiddle.net/7f7rt/6/

Answer 2

这肯定会有效。

    var posElem = document.getElementById('logo'); // set id to div 

    var newStyle = '-webkit-transform: translate(' + hCenter + 'px, ' + vCenter + 'px);' +
   'transform: translate(' + hCenter + 'px, ' + vCenter + 'px);';
   posElem.setAttribute('style',newStyle);

jquery .css（）不应用-webkit-transform

2 个答案: