<html>
<head>
<style>
.resizable{background: red}
</style>
</head>
<body>
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable"></div>
<button id="resizeAbsolute10">absolute resize 10%</button>
<button id="resizeAbsolute20">absolute resize 20%</button>
<button id="resizeRelative10">relative resize 10%</button>
<button id="resizeRelative20">relative resize 20%</button>
<button id="default_">default</button>
<script>
defaults=[10, 20, 30]
resizables=document.querySelectorAll(".resizable")
resizeAbsolute=function(percent){
return function(){
[].forEach.call(resizables, function(el, i){
with(el.style){width=(defaults[i]+percent)+"%"; height=(defaults[i]+percent)+"%"}
})
}
}
resizeRelative=function(percent){
return function(){
[].forEach.call(resizables, function(el){
with(el.style){width=(parseInt(width)+percent)+"%"; height=(parseInt(height)+percent)+"%"}
})
}
}
resizeAbsolute10.onclick=resizeAbsolute(10)
resizeAbsolute20.onclick=resizeAbsolute(20)
resizeRelative10.onclick=resizeRelative(10)
resizeRelative20.onclick=resizeRelative(20)
default_.onclick=resizeAbsolute(0)
resizeAbsolute(0)()
</script>
</body>
</html>