5

我正在尝试在 iPad 上调试网站。在桌面上显示一个元素，在 iPad 上它丢失了。

问题：
有没有办法在一个类似的语句中输出所有 CSS

console.log( $('element').attr('class') );

或者是找到错误属性以逐一遍历所有CSS规则的唯一方法？

console.log( $('element').css('position') )
console.log( $('element').css('top') )
console.log( $('element').css('left') )
console.log( $('element').css('right') )
console.log( $('element').css('bottom') )
console.log( $('element').css('width') )
console.log( $('element').css('height') )
console.log( $('element').css('display') )
... you get the point...

感谢您的输入

4

4 回答 4

4

你需要window.getComputedStyle：

getComputedStyle() 给出元素所有 CSS 属性的最终使用值。

每个现代浏览器（包括 IE9）都支持。

一个简单的例子：

var style = window.getComputedStyle($('element').get(0), null);

jsFiddle 演示

于 2012-06-15T11:01:30.487 回答
2

在 iPad 上使用一些工具远程检查页面要容易得多。iOS 6 将内置此功能，但现在没有多大帮助。如果您使用的是 Mac，您可以试用iWebInspector和 iOS SDK。如果没有，您可以查看 WeInRe。

  1. 安装iOS SDK（免费）和iWebInspector
  2. 打开 iWebInspector
  3. 点击“打开iOS模拟器”
  4. 通过菜单 Hardware -> Device -> iPad 切换到 iPad
  5. 打开 Safari 并转到您要调试的页面
  6. 在 iWebInspector 中单击“从 Safari 加载”，然后选择页面
  7. 您现在应该在 iWebInspector 中获取 WebKit 调试器

在此处输入图像描述

WeInRe (Webkit Inspector Remote) 可以在任何平台上运行，无需 iOS SDK。它不如真正的调试器好用，因为它只是注入脚本并且只能访问您通过 javascript 获得的内容。但它比以编程方式打印出所有 css 容易得多；）有时 WeInRe 在您查看元素后不会捕捉到对 DOM 的更改。所以等到 DOM 处于你想要查看的状态后，再展开父元素。WeInRe 由 PhoneGap 托管：debug.phonegap.com，或者可以安装在您的计算机上http://phonegap.github.com/weinre/

于 2012-06-15T12:00:07.460 回答
1

jquery .css() 比 .getComputedStyle 效果更好，因为它考虑了浏览器的差异（并且基于 getComputedStyle 本身），请参阅http://api.jquery.com/css/

看看如何使用 jQuery 获取元素的所有计算样式？并相信那里的答案:)

于 2012-06-15T11:02:56.740 回答
1

这是一个添加 $.fn.computedCSS() 的小插件，您可以使用它来获取其他人已经建议的内容：

代码：

(function($) {
    $.fn.computedCSS = function() {
        var elem = $(this)[0];
        var styles = window.getComputedStyle(elem);
        var computed = {};  
        for (key in styles) {
            if (!key.match(/^\d+$/) && typeof styles[key] !== 'function') {
                computed[key] = styles[key];   
            }
        }
        return computed;
    };
})(jQuery);

演示：

http://jsfiddle.net/Kd6xR/

于 2012-06-15T11:35:18.133 回答