将IE的getComputedStyle修复程序应用于我的代码...'null'为null或不是对象 [英] Applying the getComputedStyle fix for IE to my code ... 'null' is null or not a object
本文介绍了将IE的getComputedStyle修复程序应用于我的代码...'null'为null或不是对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下这个问题。我正在尝试应用以下修复以使getComputedStyle与之合作IE8（和 - ）在我用于jQuery同位素的代码中。但我仍然收到一条错误消息。任何帮助将不胜感激。
Following to this problem I had. I'm trying to apply the following fix to get getComputedStyle to work with IE8 (and -) in the code I use for jQuery isotope. But I still get an error message. Any help would be greatly appreciated.
我得到'null'为null或不是IE-Tester的对象错误消息。该网站是 http://www.gablabelle.com/
I get 'null' is null or not a object error message with IE-Tester. The website is 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 );
});
推荐答案
按照@Nelson的逻辑，我决定添加值我想用jQuery而不是CSS来确保它在DOM中并且可以被操作。
Following @Nelson 's logic I decided to add the value I wanted to catch using jQuery instead of CSS to make sure it was in the DOM and can be manipulated.
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（可在任何地方添加）：
HTML (can be added anywhere):
<span id="switch"></span>
CSS（我不认为媒体查询部分是强制性的，因为我们在jquery中设置了它） ：
CSS (I don't think the media queries part is mandatory since we set this up in 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";
}
}
这篇关于将IE的getComputedStyle修复程序应用于我的代码...'null'为null或不是对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
