Here is a script I have:
box.copyHeight = function() {
var heights = [],
i, hT;
for (i = 0; i < arguments.length; i++) {
if ($(arguments[i])) {
$(arguments[i]).css('height', '');
if ($(arguments[i])[0] !== undefined) {
heights.unshift($(arguments[i]).height());
}
}
}
hT = heights.sort(function(a, b) {
return a - b;
}).reverse()[0]; //ninja *[1]
for (i = 0; i < arguments.length; i++) {
if ($(arguments[i])) {
$(arguments[i]).css('height', hT + 'px');
}
}
return hT;
};
This line calls the function:
box.copyHeight('article','aside');
The function sets the height for <article> and <aside>, always choosing the highest value.
The issue is that it's not working properly in IE 11. After some debugging, I found a simple solution of adding !important to the height style.
My question is, how can I achieve this through jQuery, specifically in this line:
$(arguments[i]).css('height','');
Currently, the output is <article style="700px"> and <aside style="700px">, but it should be
<article style="700px!important"><aside style="700px!important">