PDA

View Full Version : "this" in DOM


DarkBlood
October 7th, 2007, 21:32
I was wondering how to get JavaScript reference to a specific instance of a tag when mouse over and mouse out are triggered. As you can plainly see, I am trying to use the "this" object property so I don't end up editing a bunch of other tags (with the same ID and tag name or name.)

So, can someone tell me how to set it up so I add 5 to the value of topmargin for the this object?
fireshark
October 10th, 2007, 19:18
this.style.topMargin = this.style.topMargin + 5;?

I'm not sure if that's the righ way to use this, but i know thats how you change css in jaavscript.
krakjoe
October 10th, 2007, 20:16
IE won't let you prototype that part of DOM ...



<html>
<head>
<script language="javascript">
function increaseMargin( element, amount )
{
var current = element.style.marginTop.replace( /px$/, "" );
var next = Number( amount ) + Number( current );
return element.style.marginTop = next + 'px';
}

</script>
</head>
<body style="background:red;color:white;">
<div id="theDiv" style="background: black;" onclick="increaseMargin( this, 5 );">click me</div>
</body>
</html>


still possible though, just not with the syntax you wanted crossbrowser, Gecko lets you prototype it but not IE .....
DarkBlood
October 11th, 2007, 03:00
IE won't let you prototype that part of DOM ...



<html>
<head>
<script language="javascript">
function increaseMargin( element, amount )
{
var current = element.style.marginTop.replace( /px$/, "" );
var next = Number( amount ) + Number( current );
return element.style.marginTop = next + 'px';
}

</script>
</head>
<body style="background:red;color:white;">
<div id="theDiv" style="background: black;" onclick="increaseMargin( this, 5 );">click me</div>
</body>
</html>


still possible though, just not with the syntax you wanted crossbrowser, Gecko lets you prototype it but not IE .....

That works in Netscape 9 and IE7, so that's good enough, thanks krak.