Question

我在may page

中有以下代码

var x = parseInt($(this).css('backgroundPosition').split(" ")[0]);

在IE9和FF以及Chrome中，一切正常，但即使是Iphone，IE8和IE7也会出错，我调试的问题是.css方法无法解析属性。

似乎我在页面底部使用的document.ready函数在将css应用于元素之前加载此代码，在此上下文中这是一个td表元素

有关如何优雅地解决此问题的任何想法

谢谢

Answer 1

将实际问题放在一边我建议您先进行null检查，以免在创建问题的浏览器中破坏其他javascript执行流程。

var bPos = $(this).css('backgroundPosition');
var x;
if(bPos){
    bPos = bPos.split(" ");
    if(bPos.length){
       x = parseInt(bPos[0]);
    }
}

Answer 2

我使用jQuery在undefined（和backgroundPosition）属性上得到background-position。

看起来你可以在IE中的background-position中访问X和Y，如果你单独引用它们的话：

<html>
<head>
<style type="text/css">
body {
    background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG);
    background-repeat: no-repeat;
    background-position: 100px 500px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<p>Test of doc.ready and bg pos in IE8/9</p>
<script>
$(document).ready(function(){
    if ($.browser.msie) {
        console.log('X: ' + $('body').css('backgroundPositionX'));
        console.log('Y: ' + $('body').css('backgroundPositionY'));
    } else {
        console.log('X: ' + parseInt($('body').css('backgroundPosition').split(" ")[0]));
        console.log('Y: ' + parseInt($('body').css('backgroundPosition').split(" ")[1]));
    }
});
</script>
</body>
</html>

在IE7 / 8中（使用IE9控制台）：

LOG: X: 100px 
LOG: Y: 500px

http://jfcoder.com/test/bgpos.html

然而，它确实看起来在Firefox中不起作用（不输出任何内容）。所以我调整了代码以检测IE。

在IE8中加载元素css样式之前，Jquery document.ready事件触发

2 个答案: