passing style properties to function, howto?

**shachi** · 11-24-2006, 05:39 PM

Hello everyone,
I was making some scripts when I came across a problem, can I pass style properties as an arguement? Something like this:

Code:

function stylize(prop, propval, obj){
document.getElementById("obj").style.prop = propval;
}
stylize(border, "1px solid red", "somediv");

It doesn't seem to work and I am tired of trying this. Does anyone know how to make this work? If so I would be greatly appreciated if you could help me with this.

**coothead** · 11-24-2006, 06:10 PM

Hi there shachi,

The problem is that...

Code:


document.getElementById("obj").style.prop = propval;

...will not work.

I would suggest that, instead, you set the style changes as a class in your style sheet and then callthat...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#somediv {
    width:100px;
    height:100px;
}
.stuff {
    border:1px solid red;
}
-->
</style>

<script type="text/javascript">
<!--
function stylize(obj,propval){
   document.getElementById(obj).className=propval;
 }
window.onload=function(){
   stylize('somediv','stuff');
 }
//-->
</script>

</head>
<body>

<div id="somediv"></div>

</body>
</html>

coothead

**Twey** · 11-24-2006, 06:22 PM

The same types of problems apply to this code that apply to the code coothead posted in this thread. However, the basic idea is sound: it's much better to use a CSS class and the className property when dealing with this sort of thing.

However, I sense that the code you posted was just a demonstration, and perhaps your actual code does require you to modify a property directly. Every object in Javascript is also an associative array: that is to say,

Code:

style.prop

is exactly equivalent to

Code:

style['prop']

As such, you can do:

Code:

function stylize(obj, prop, val) {
  obj.style[prop] = val;
}

**shachi** · 11-24-2006, 06:34 PM

That works great, Thanks a lot Twey. You completely got what I meant. Thanks a lot again.

Would this be a cross-browser code?

Code:

function stylize(obj, prop, val) { 
document.getElementById(obj).style[prop] = val; 
}

Brilliant!!!

**Twey** · 11-24-2006, 06:37 PM

Yes, it should work with any current DOM-supporting browser.

**shachi** · 11-24-2006, 06:52 PM

Oh, thanks again. By the way sorry to bother you but can I ask another question?

Can you tell me why this doesn't work?

Code:

var elem = document.getElementById("someelement");
while(elem.offsetLeft != 200){
elem.style.left += 2 + "px";
}

The browser stops the script everytime I try to run it.

Thanks a lot again.

**Twey** · 11-24-2006, 07:01 PM

Because elem.style.left is a string. Say, for example, that its initial value was 5px. After the first iteration of your loop, it would be 5px2px. After another, it would be 5px2px2px.
You could use parseInt():

Code:

var elem = document.getElementById("someelement");
while(elem.offsetLeft !== 200)
  elem.style.left = (parseInt(elem.style.left) + 2) + "px";

However, it seems to me to be much simpler to set:

Code:

elem.style.left = "200px";

**shachi** · 11-24-2006, 07:37 PM

Actually, I wanted to animate the element(without using setTimeout). Any ideas how I can do it? Thanks again.

**ItsMeOnly** · 11-24-2006, 07:53 PM

you are on right track, however this is going to slow down the browser considerably on weaker hardware- you ask to iterate thru loop at every available speed, I'd suggest setting up an interval instead of while loop.

**Twey** · 11-24-2006, 08:22 PM

Yes, setTimeout() or setInterval() is really the only way to do it.

Thread: passing style properties to function, howto?

Thread Tools

Search Thread

passing style properties to function, howto?

Bookmarks

Bookmarks

Posting Permissions