Jquery 正在将IE的getComputedStyle修复程序应用于我的代码'；空'；是否为null或不是对象

跟在我的后面。我正试图在我用于jQuery的代码中应用getComputedStyle来处理IE8（和-）。但我仍然收到一条错误消息。任何帮助都将不胜感激

我得到的“null”是null或不是IE Tester的对象错误消息。该网站是

---

IE8

currentStyle

对象似乎不包含有关

内容的信息

css属性，我在您的网页中测试了它，打印了所有

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');

在下一行中，它对

null

对象调用

.replace（）

，从而得到错误

您需要以其他方式获取

内容

值，当前您正在使用

body:after

css打印body:aftercss，我不知道为什么要这样做，您可以尝试将其打印到身体内的一个不可见元素，然后从那里检索它。。像这样：

CSS:

您的

#hid

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

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

---

因此，这样做根本不需要IE补丁，因为IE补丁对

内容
属性不起作用。
按照@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 );
    });
});

谢谢你的时间和帮助。测试后，似乎var mediaQueryId=$（'#hid'）.html（）；无法捕获内容值。我正在使用$（'#switch'）.html（）。。。可能是因为内容实际上不是在html中，而是由CSS添加的？还有别的办法抓住它吗？检查我的答案。再次感谢。@加布，我很高兴你终于解决了，考虑一下我的答案（上箭头），如果它对你有帮助的话：
<span id="hid" style="display:none"></span>

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

$(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 );
    });
});

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

#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";
    }
}