Skip to content

Instantly share code, notes, and snippets.

@epetakov

epetakov/jsbin.dosutimo.css

Created February 27, 2014 14:57
Show Gist options
  • Save epetakov/9251681 to your computer and use it in GitHub Desktop.
Save epetakov/9251681 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.dosutimo.css
.box {
width: 40px;
height: 200px;
background: navajowhite;
border: solid 5px #304;
margin: 50px auto;
}
.rs {
text-align: left;
font-family: Arial, sans-serif;
line-height: .5;
}
Raw
jsbin.dosutimo.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="box" class="box"></div>
<div id="result" class="rs"></div>
</body>
</html>
Raw
jsbin.dosutimo.js
var box = document.getElementById('box'),
x, y, w;
x = box.getBoundingClientRect().left;
y = box.getBoundingClientRect().top;
if (box.getBoundingClientRect().width) {
w = box.getBoundingClientRect().width; // for modern browsers
} else {
w = box.offsetWidth; // for oldIE
}
document.getElementById('result').innerHTML = '<strong>This box is</strong>:<br>' + x + 'px from the left<br>' + y + 'px from the top<br>' + w + 'px wide<br>';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment