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

发布于 2024-12-03 04:37:18 字数 321 浏览 0 评论 0原文

我在 5 月页面中有以下代码，

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

在 IE9、FF 和 Chrome 中一切正常，甚至在 Iphone 中也能正常工作，但 IE8 和 IE7 会抛出错误，我调试问题是 .css 方法无法解析该属性。

看起来我在页面底部使用的 document.ready 函数在将 css 应用于元素之前加载此代码，在这种情况下，这是一个 td 表元素

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

谢谢

原文

I have the following code in may page

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

Everything works fine in IE9 and FF and Chrome, even Iphone but IE8 and IE7 throws an error, I debugged the issue to be that the .css method can't resolve the property.

It seems like the document.ready function I use at the bottom of the page loads this code before the css is applied to the element, in this context the this is a td table element

Any ideas on how to elegantly fix this issue

Thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

戴着白色围巾的女孩 2024-12-10 04:37:18

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

如果您单独引用每个，看起来您确实可以在 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。

I do get undefined on the backgroundPosition (and background-position) property using jQuery.

It does look like you can access the X and Y in background-position in IE if you refer to each individually:

<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>

In IE7/8 (using IE9 console):

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

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

However, it does look like it doesn't work in Firefox (doesn't output anything). So I adjusted the code to detect IE.

回复收藏 0 原文

离笑几人歌 2024-12-10 04:37:18

抛开实际问题不谈，我建议您首先进行 null 检查，这样就不会破坏产生问题的浏览器中的其他 JavaScript 执行流程。

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

Keeping the actual issue aside I would suggest you to do a null check first so that it will not break other javascript execution flow in the browsers where it is creating the problem.

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

回复收藏 0 原文

~没有更多了~

关于作者

情归归情

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

书间行客

我ぃ本無心為│何有愛

神妖

undefined

38169838

彡翼

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

书间行客

我ぃ本無心為│何有愛

神妖

undefined

38169838

彡翼

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。