I'm trying to simplify a list of statements similar to the following:
document.getElementById('header').style['background']=default.header['background'];
document.getElementById('header').style['borderColor']=default.header['borderColor'];
document.getElementById('header').style['borderWidth']=default.header['borderWidth'];
document.getElementById('middle').style['background']=default.middle['background'];
document.getElementById('middle').style['borderColor']=default.middle['borderColor'];
document.getElementById('middle').style['borderWidth']=default.middle['borderWidth'];
document.getElementById('footer').style['background']=default.footer['background'];
document.getElementById('footer').style['borderColor']=default.footer['borderColor'];
document.getElementById('footer').style['borderWidth']=default.footer['borderWidth'];
In PHP, I could handle this fairly easily by defining an array and stepping
through with nested foreach loops:
$default = array(
"header"=>array( "background"=>"black", "borderColor"=>"green",
"borderWidth"=>"5px" )
"middle"=>array( "background"=>"blue", "borderColor"=>"white",
"borderWidth"=>"15px" )
"footer"=>array( "background"=>"red", "borderColor"=>"maroon",
"borderWidth"=>"10px" )
);
foreach($default as $segment) {
foreach($segment as $element=>$value) {
document.getElementById($segment).style['$element']=default[$segment][$element];
}
}
(code is untested, just for demo)
Is there a comparable way to accomplish this in JavaScript?
A related question is: Is there a simpler way to define the arrays than by
defining:
default.header['background']="black";
default.header['borderColor']="green";
etc.
I'm dealing with a situation where I have to define a large number of
properties for a large number of segments, and be able to change them all
dynamically.
I've done a bit of searching but I can't find a construct that will simplify
this to any great degree. Any suggestions?