Question

我无法在：

中读取CSS3变换旋转值

Opera 9.62
Opera 10.51
FireFox 4.01

在IE，Chrome和Safari中运行良好，但在上面这三个版本中没有。这是来源：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <style>
        div {
            -webkit-transform:     rotate(-5deg);
            -moz-transform:        rotate(-5deg);
            -o-transform:        rotate(-5deg);
            -ms-transform:        rotate(-5deg);
            transform:            rotate(-5deg);
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            // tries to read the CSS rotate data
            // starts by reading -webkit-transform, if it
            // fails then read -moz-transform and so on
            var getRotation = function ($e) {
                var value = $e.css('-webkit-transform');
                if (value === undefined) {
                    value = $e.css('-moz-transform');
                    if (value === undefined) {
                        value = $e.css('-o-transform');
                        if (value === undefined) {
                            value = $e.css('-ms-transform');
                            if (value === undefined) {
                                value = $e.css('transform');
                            }
                        }
                    }
                }
                return value === undefined? '' : value;
            };

            var returnValue = getRotation($("div"));
            alert(returnValue === ''?
                "Failed to get rotation info!" : 
                "Got it: " + returnValue);
        });
    </script>
</head>
<body>
    <div>rotated</div>
</body>
</html>

live sample on jsfiddle here

所以，我想使用jquery css()来读取旋转角度，但奇怪的是，Opera 10.51和FF 4.01（及以下版本）无法读取它，尽管div通过旋转正确呈现效果。

这看起来像是jQuery错误或浏览器错误。 有没有人有Opera / FF的解决方法？

如果你收到一条警告说“得到它”，那就行了。

感谢您的帮助。

Answer 1

好的，我发现了问题。问题出在我的代码上，没有正确检查css() getter的返回值。

我之前：

if (value === undefined) {...

通过将上述条件更改为：

，问题得以解决

if (notDefined(value)) {...

其中notDefined是函数

var notDefined = function(value) {
    return value == null || value == undefined || value == "" || value == "none";
}

要跨浏览器，我需要与所有这三种情况进行比较，而不仅仅是未定义。

您可以看到更新here

适用于所有最新版本的IE（也包括IE7和8），Firefox，Safari，Chrome和Opera。

Opera和FireFox无法读取CSS3旋转值

1 个答案: