javascript - HTML 偏移宽度

Question

有人可以列出组成 offsetwidth 的属性吗？

此外，我需要通过 javascript 检索所有这些属性并将它们相加来计算 offsetwidth。所有这些属性的总和需要等于 offsetwidth。

代码需要兼容IE7。

任何帮助将不胜感激。谢谢!

Answer 1

您需要一种方法来确定浏览器的滚动条宽度

// adapted from http://davidwalsh.name/detect-scrollbar-width
function getScrollBarWidth() {
    var container = document.createElement('div');
    container.style.width = '100px';
    container.style.height = '100px';
    container.style.overflow = 'scroll';
    container.style.position = 'absolute';
    container.style.top = '-9999px';
    document.body.appendChild(container);
    var width = container.offsetWidth - container.clientWidth;
    document.body.removeChild(container);
    return width;
}

您还需要一种方法来确定元素是否有垂直滚动条，然后您只需将所有宽度相加即可!

function getOffsetWidth(element) {
    var hasVerticalScrollbar = element.scrollHeight > element.clientHeight &&
        !(element.style.overflow && element.style.overflow == 'hidden');

    var style = getComputedStyle(element);

    var offsetWidth = (parseFloat(style.getPropertyValue('border-left-width'))) +
        (parseFloat(style.getPropertyValue('border-right-width'))) +
        element.clientWidth +
        (hasVerticalScrollbar ? getScrollBarWidth() : 0);

    return offsetWidth;
}

这是 IE7/8 中 window.getCompulatedStyle 的填充代码 - http://snipplr.com/view/13523/

这是一个正在运行的 jsbin - http://jsbin.com/iboharI/1/edit?html,css,js,console,output

引用

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetWidth https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements http://caniuse.com/getcomputedstyle