<!DOCTYPE HTML>
<head>
<style>
.float {
height: 80px;
background: yellow;
width:120px;
margin: 5px;
float: left;
}
.size {
height:160px
}
</style>
</head>
<body>
<div class="float">
<div>Test</div>
</div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<script>
(function () {
document.onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
active = this.querySelector('.size'),
elCls;
while (target != this) {
elCls = target.className;
elCls == 'float' && (target.className += ' size') ||
elCls == 'float size' && (target.className = 'float');
target = target.parentNode;
}
active && (active.className = 'float');
}
}());
</script>
</body>
http://learn.javascript.ru/play/YGn0Sb
А код то становится все короче