Как перевести pt, em и пр. в пиксели
function collisionDetection(x1, y1, w1, h1, x2, y2, w2, h2) { return x1 < (x2 + w2) && y1 < (y2 + h2) && (x1 + w1) > x2 && (y1 + h1) > y2; } function calcSize(el, props) { var total = 0; for (var i = 0; i < props.length; ++i) { total += parseInt(getStyle(el, props[i])); // вот тут короче, если в пикселях заданы ширина и отступы все ок, в противном же случае все будет неправильно работать } return total; } function calcWidth(el) { return calcSize(el, ['border-left-width', 'padding-left', 'width', 'padding-right', 'border-right-width']); } function calcHeight(el) { return calcSize(el, ['border-top-width', 'padding-top', 'height', 'padding-bottom', 'border-bottom-width']); } function isCollide(a, b) { var p1 = getPosition(a), p2 = getPosition(b); return collisionDetection(p1.left, p1.top, calcWidth(a), calcHeight(a), p2.left, p2.top, calcWidth(b), calcHeight(b)); } |
Нормальные люди используют для этого elem.offsetWidth/offsetHeight .
P.S. напрямую например em никак не перевести, т.к. это величина относительная. |
Хорошее замечание
function makeDraggable(el, dragOptions) { var drag, dx, dy; el.addEventListener('mousedown', function(e) { var position = getPosition(this); // тут еще остались маргины, как от них избавиться? dx = position.left - e.clientX - parseInt(getStyle(this, 'margin-left')); dy = position.top - e.clientY - parseInt(getStyle(this, 'margin-top')); this.style.zIndex = maxZindex++; if (dragOptions.start) { dragOptions.start(); } drag = true; }, false); document.addEventListener('mousemove', function(e) { if (drag) { el.style.left = e.clientX + dx + 'px'; el.style.top = e.clientY + dy + 'px'; if (dragOptions.drag) { dragOptions.drag(); } } }, false); document.addEventListener('mouseup', function() { if (drag) { if (dragOptions.end) { dragOptions.end(); } drag = false; } }, false); } function collisionDetection(x1, y1, w1, h1, x2, y2, w2, h2) { return x1 < (x2 + w2) && y1 < (y2 + h2) && (x1 + w1) > x2 && (y1 + h1) > y2; } function isCollide(a, b) { var p1 = getPosition(a); var p2 = getPosition(b); return collisionDetection(p1.left, p1.top, a.offsetWidth, a.offsetHeight, p2.left, p2.top, b.offsetWidth, b.offsetHeight); } |
16 px по умолчанию 1 em, 1 em == размер шрифта
|
<div style="font-size:2em"> <div style="height:1em" onclick="alert(this.offsetHeight)">click</div> </div> |
em может быть изменён наследованием.
Так например у body{ font-size:14px; } body>div{ font-size:1.2em; } div>a{ font-size:0.7em; } Вот и считайте. кстати поумолчанию не обязательно 16px у меня например 18px на мониторе 23' удобнее. Раньше у меня был 17' монитор, я использовал 14px P.S. Вообще грамотные сайты вроде гугла обсчитывают размер шрифта для монитора скриптом |
Часовой пояс GMT +3, время: 08:49. |