Как перевести 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)); 
}

[Aetae]

Нормальные люди используют для этого 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 == размер шрифта

[Aetae]

<div style="font-size:2em">
  <div style="height:1em" onclick="alert(this.offsetHeight)">click</div>
</div>

[Geddar]

em может быть изменён наследованием.
Так например у

body{
font-size:14px;
}

body>div{
font-size:1.2em;
}

div>a{
font-size:0.7em;
}

Вот и считайте.

кстати поумолчанию не обязательно 16px у меня например 18px на мониторе 23' удобнее. Раньше у меня был 17' монитор, я использовал 14px
P.S. Вообще грамотные сайты вроде гугла обсчитывают размер шрифта для монитора скриптом