Trouble with dynamic javascript style

[joe92]

Hi,

 

I am trying to create a function which can dynamically create an element for me. I am having difficulty with dynamically creating the styles though. This is my code so far:

 

<?php //not php, just wanted syntax highlighting 
/*a function to create an element. Pass 0 for a null parameter. Declarations MUST be passed as an array in the format, array(property1, value1, property2, value2, etc...)*/
function createEl(el, inner, declarations, imageSrc){
/*sort out the optional parameters. El is a non optional string determining the element*/
var inner	 = inner	|| 0;
var imageSrc	 = imageSrc	|| 0;
var declarations = declarations || 0;

/*create the element based on optional parameters sent through*/
var newElement = document.createElement(el);
if(inner != 0)
	{
		newElement.innerHTML = inner;
	}
if(imageSrc != 0)
	{
		newElement.src = imageSrc;
	}
/*create the styles from the declarations array passed*/
if(declarations != 0)
	{
		/*create two new arrays to sort the properties from their values*/
		var property = new Array();
		var itsvalue = new Array();
		var propertyNum = 0;
		var itsvalueNum = 0;
		/*split the declarations array into properties and values, place into respective arrays*/
		for(var i=0;i<declarations.length;i++)
			{
				/*values*/
				if(i & 1)
					{
						itsvalue[itsvalueNum] = declarations[i];
						++itsvalueNum;
					}
				/*properties*/
				else{
						property[propertyNum] = declarations[i];
						++propertyNum;
					}
			}
		/*now loop through the properties and add them, with their correlating values, to the element*/
		var thisProp = '';
		for(var j=0;j<property.length;j++) /*this is the part that is not working. The styles do not get added*/
			{
				thisProp = property[j]; /*it didn't like just placing an array position after style.*/
				newElement.style.thisProp = itsvalue[j];
			}
	}
/*return the created element*/
return newElement;
}

 

That code looks more than it is. What I need to know is how can I dynamically apply the styles (for loop right at the bottom of the code block) to this element without running a massive if-else statement?

 

I had a play around with eval but I couldn't get it to work for me. I tried many things, and the following which I thought might have most chance of working:

eval(newElement.style.thisProp = 'itsvalue[j]');

 

And I have tested, it definitely pulls out the property and value fine from the passed array. Just I'm having trouble with applying them.

 

Thank you,

Joe

[joe92]

Ha, never mind. I was going along the right path with eval. I just wasn't doing it properly and the guide for this function anywhere is just abysmal. Anyway, the following eval code works:

 

eval('newElement.style.'+property[j]+' = \''+itsvalue[j]+'\'');

 

It's a shame I have to use eval though. I continuously read that it's an evil function  :-\ If anyone knows a way around eval, I'd love to hear it!

 

Thread solved though,

Joe