0

继这个问题之后，我遇到了。我正在尝试应用以下修复以使 getComputedStyle 在用于 jQuery 同位素的代码中与 IE8（和 -）一起使用。但我仍然收到一条错误消息。任何帮助将不胜感激。

我得到 'null' is null 或不是 IE-Tes​​ter 的对象错误消息。该网站是http://www.gablabelle.com/

    $(document).ready(function(){
        var layoutI = 0;
        var $container = $("#stream");
        var $window = $(window);
//getComputedStyle fix for IE ?
        if (!window.getComputedStyle) {
            window.getComputedStyle = function(el, pseudo) {
                this.el = el;
                this.getPropertyValue = function(prop) {
                    var re = /(\-([a-z]){1})/g;
                    if (prop == 'float') prop = 'styleFloat';
                    if (re.test(prop)) {
                        prop = prop.replace(re, function () {
                            return arguments[2].toUpperCase();
                        });
                    }
                    return el.currentStyle[prop] ? el.currentStyle[prop] : null;
                }
                return this;
            }
        };
        function reLayout(){
// getComputedStyle is used here
            var mediaQueryId = getComputedStyle( document.body, ':after' ).getPropertyValue('content');
            // fix for firefox, remove double quotes
            var mediaQueryId = mediaQueryId.replace( /"/g, '' );
            // console.log( mediaQueryId );
            var windowSize = $window.width();
            var masonryOpts;
            // update sizing options 
            switch ( mediaQueryId ) {
                case 'bigger' :
                    masonryOpts = {
                        columnWidth: 270,
                        gutterWidth: 30
                    };
                break;
                case 'big' :
                    masonryOpts = {
                        columnWidth: 220,
                        gutterWidth: 20
                    };
                break;
                case 'medium' :
                    masonryOpts = {
                        columnWidth: 166,
                        gutterWidth: 20
                    };
                break;
                case 'small' :
                    masonryOpts = {
                        columnWidth: $container.width() / 2,
                        gutterWidth: 0
                    };  
                break;
            };
            $container.isotope({
                resizable: false, // disable resizing by default, we'll trigger it manually
                itemSelector : "article.post",
                animationEngine: "best-available",
                masonry: masonryOpts,
                onLayout: function() {
                //  console.log('layout!' + (layoutI++) )
                    forceLoad();
                    setTimeout(function(){
                        html_height = $container.height();
                        $("#sidebar").height(html_height - masonryOpts.gutterWidth);
                    }, 500);
                }
            });
        };
        // start up isotope with default settings
        $container.imagesLoaded( function(){
            reLayout();
            $window.smartresize( reLayout );
        });
4

2 回答 2

1

似乎 IE8currentStyle对象不携带有关contentcss 属性的信息，我在您的网页中对其进行了测试，打印了所有currentStyle信息，如下所示：

for(var i in document.body.currentStyle) {
      console.log(i + ' : ' + document.body.currentStyle[i] );
}

并且该content属性不存在，这就是为什么在您的以下行中getPropertyValue()返回：null

var mediaQueryId = getComputedStyle( document.body, ':after' ).getPropertyValue('content');

在下一行中，它调用.replace()该null对象，因此您得到了错误。

您需要以content其他方式获取值，目前您正在打印是否在使用body:aftercss 的正文之后，我不知道您为什么这样做，您可以尝试将其打印到您体内的一个不可见元素，然后从那里检索它..像这样：

CSS：

@media (min-width: 1200px) {
    #hid:after {
        content: 'bigger';
    }
...
...

您的#hid元素可以位于页面中的任何位置，例如：

<span id="hid" style="display:none"></span>

然后你的reLayout()函数会像这样检索它：

function reLayout(){
// getComputedStyle is used here
            var mediaQueryId = $('#hid').html();
            // fix for firefox, remove double quotes
            var mediaQueryId = mediaQueryId.replace( /"/g, '' );
...
...

所以这样做你根本不需要你的 IE 修复，这无论如何都不适用于该content属性。

于 2012-10-18T10:27:42.053 回答
0

按照@Nelson 的逻辑，我决定添加我想使用 jQuery 而不是 CSS 捕获的值，以确保它在 DOM 中并且可以被操作。

jQuery：

$(document).ready(function(){
    var layoutI = 0;
    var $container = $("#stream");
    var $window = $(window);
    function windowSizeMe(){
        var windowSize = $window.width();
        if (windowSize > 1199) {
            $("#switch").attr("data-content", "bigger");
        } else if (windowSize < 1200 && windowSize > 979) {
            $("#switch").attr("data-content", "big");
        } else if (windowSize < 768) {
            $("#switch").attr("data-content", "small");
        } else {
            $("#switch").attr("data-content", "medium");
        };
    }; 
    function reLayout(){
        windowSizeMe(); 
        var mediaQueryId = $("#switch").attr("data-content");
        console.log(mediaQueryId);
        // fix for firefox, remove double quotes
        var mediaQueryId = mediaQueryId.replace( /"/g, '' );
        var masonryOpts;
        // update sizing options 
        switch ( mediaQueryId ) {
            case 'bigger' :
                masonryOpts = {
                    columnWidth: 270,
                    gutterWidth: 30
                };
            break;
            case 'big' :
                masonryOpts = {
                    columnWidth: 220,
                    gutterWidth: 20
                };
            break;
            case 'medium' :
                masonryOpts = {
                    columnWidth: 166,
                    gutterWidth: 20
                };
            break;
            case 'small' :
                masonryOpts = {
                    columnWidth: $container.width() / 2,
                    gutterWidth: 0
                };  
            break;
        };
        $container.isotope({
            resizable: false, // disable resizing by default, we'll trigger it manually
            itemSelector : "article.post",
            animationEngine: "best-available",
            masonry: masonryOpts,
            onLayout: function() {
            //  console.log('layout!' + (layoutI++) )
                forceLoad();
                setTimeout(function(){
                    html_height = $container.height();
                    $("#sidebar").height(html_height - masonryOpts.gutterWidth);
                }, 500);
            }
        });
    };
    // start up isotope with default settings
    $container.imagesLoaded( function(){
        reLayout();
        $window.smartresize( reLayout );
    });
});

HTML（可以在任何地方添加）：

<span id="switch"></span>

CSS（我不认为媒体查询部分是强制性的，因为我们在 jquery 中设置了它）：

#switch {
    display: none;
}
/**** Media queries ****/
@media (max-width: 767px) {
    #switch:after {
        content: attr(data-content) "small";
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    #switch:after {
        content: attr(data-content) "medium";
    }
}
@media (min-width: 980px) and (max-width: 1199px) {
    #switch:after {
        content: attr(data-content) "big";
    }
}
@media (min-width: 1200px) {
    #switch:after {
        content: attr(data-content) "bigger";
    }
}
于 2012-10-19T17:17:09.640 回答