0

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

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

代码需要兼容IE7。

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

4

1 回答 1

2

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

// 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;
}

这是window.getComputedStyleIE7/8 中的 polyfill - 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

于 2013-11-07T02:44:45.500 回答