Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body onload="Test()">
<img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100">
<div id="log"></div>
</body>
</html>
 
body { margin: 0; }
img:nth-child(1) {
  zoom: 2;
}
img:nth-child(2) {
  zoom: 1.50;
}
img:nth-child(3) {
  zoom: 1;
}
img:nth-child(4) {
  zoom: 0.5;
}
 
function Test() {
    var images = document.body.getElementsByTagName('img');
    var log = document.getElementById('log');
    for(var i = 0; i < images.length; i++) {
        var image = images[i];
        var computedStyle = window.getComputedStyle(image);
        log.innerHTML = log.innerHTML +
            "offsetWidth: " + image.offsetWidth + 
            " offsetHeight: " + image.offsetHeight + "<br/>" +
            "offsetLeft: " + image.offsetLeft + 
            " offsetTop: " + image.offsetTop + "<br/>" +
            "getClientRects: [left: " + image.getClientRects()[0]["left"] + 
            " top: " + image.getClientRects()[0]["top"] + 
            " width: " + image.getClientRects()[0]["width"] + 
            " height: " + image.getClientRects()[0]["height"] + "]<br/>" +
            "getComputedStyle: [width: " + computedStyle["width"] + 
            " height: " + computedStyle["height"] + "]<br/><br/>";
    }
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers