0

この問題に続いて私は持っていました。次の修正を適用して、jQueryアイソトープに使用するコードでgetComputedStyleをIE8（および-）で動作させるようにしています。しかし、それでもエラーメッセージが表示されます。どんな助けでも大歓迎です。

'null'が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オブジェクトはcssプロパティに関する情報を持っていないようです。私はあなたのウェブページでそれをテストし、次のようにcontentすべての情報を印刷しました。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のロジックに従って、CSSの代わりにjQueryを使用してキャッチしたい値を追加し、それが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 に答える