Extracting value from a div sent in to javascript

Question

Im attempting to get the ID of the specific box that i call.

<div id="box1" onmouseover="transition(box1)" onmouseout="detransition(box1)">
   <div class="box1-smallbox">

   </div>

function transition(prop){
     document.getElementsByTagName(prop + "-smallbox").style.marginLeft = X;
}

I want to get that prop = box1. For a easy system that then can be used with 10 or 20 boxes.

Thanks in advance!

Answer 1

without jquery, only javascript:

<div id="box1" onmouseover="transition(this.id)" onmouseout="detransition(this.id)">
    <div class="box1-smallbox">aaa</div>
</div>
<div id="box2" onmouseover="transition(this.id)" onmouseout="detransition(this.id)">
    <div class="box2-smallbox">bbb</div>
</div>
<div id="box3" onmouseover="transition(this.id)" onmouseout="detransition(this.id)">
    <div class="box3-smallbox">ccc</div>
</div>

<script type="text/javascript" language="javascript">
function transition(prop){
    var els = document.getElementsByTagName("div");
    for(var i=0;i<els.length;i++){
        if(els[i].className==prop+"-smallbox"){
            els[i].style.marginLeft = 200;
        }
    }
}
function detransition(prop){
    var els = document.getElementsByTagName("div");
    for(var i=0;i<els.length;i++){
        if(els[i].className==prop+"-smallbox"){
            els[i].style.marginLeft = 0;
        }
    }
}
</script>