I searched for a similar question, but I couldn't find anything quite like it.
I'm currently developing a JavaScript Slider plugin for various projects within our company. This requires me to manipulate styles on certain elements in the DOM. I've tested this on Chrome, Chrome on Android, Safari, Safari on iOS, and Opera, all of which work fine. However, when trying this on Firefox, it seems like the style attributes are not being applied at all. Here's the code snippet (or you can view it on JSFiddle):
// HTML
<div id="testwrapper">
</div>
// JavaScript
(function(){
var extend = function(source, additions) {
for (var addition in additions) {
source[addition] = additions[addition];
}
};
var testEl = document.getElementById('testwrapper');
var testStyles = {
width: '150px',
height: '150px',
padding: '5px',
margin: '5px'
};
window.setTimeout(function(){
extend(testEl.style, testStyles);
}, 15000)
}());
My intention is clear - I want to take the existing style attributes of an element and extend them with those from the testStyles object. This seemed straightforward to me and much more convenient than individually setting each attribute like so:
testEl.style.width = 'Xpx';
testEl.style.height = 'Ypx';
// and so on
While this approach works in other browsers, it fails in Firefox. However, writing separate lines for each style attribute would make my code cumbersome due to varying conditions where some attributes may change while others remain constant.
So here's my question:
Is there a way to achieve the same outcome in Firefox as in Chrome without resorting to jQuery? Am I missing something or is this method of manipulating style attributes not supported in Firefox?
Thanks for your assistance.
PS: Please refrain from suggesting the use of jQuery. Just keep that in mind, thank you.