将IE的getComputedStyle修复程序应用于我的代码…’null’为null或不是对象

我遇到了这个问题 。 我正在尝试应用以下修复来使getComputedStyle与我用于jQuery同位素的代码中的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 = /(\-([az]){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 ); }); 

Answer 1

看来IE8的currentStyle对象没有携带有关content 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() ，从而得到你得到的错误。

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

CSS：

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

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

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

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

所以这样做你根本不需要你的IE修复，无论如何它对content属性不起作用。

Answer 2

按照@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（可以在任何地方添加）：

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