outerWidth without jquery
It's possible to get the element outerWidth using the dom?
Ej:
var width 开发者_如何学Go= document.getElementById('myDiv').outerWidth;
No, but you can get offsetWidth, which is probably what you want.
From http://www.quirksmode.org/dom/w3c_cssom.html
offsetWidth and offsetHeight
The width & height of the entire element, including borders and padding (excluding margins).
clientWidth and clientHeight
The width & height of the element including padding (excluding borders and margins)
See this fiddle for an example.
var elm = document.querySelector('div');
document.body.innerHTML += `
clientWidth: ${elm.clientWidth} px
<br>
scrollWidth: ${elm.scrollWidth} px
<br>
offsetWidth: ${elm.offsetWidth} px`
div{
width : 200px;
padding : 10px;
border : 10px solid gold;
margin : 10px;
background : lightgreen;
}
<div></div>
If you use jQuery you have more options: width, innerWidth and outerWidth properties. http://api.jquery.com/category/manipulation/style-properties/
Sean provided the perfect solution for outerWidth().
Just to add to that, if you're looking for a substitution for any or all of the jQuery dimension getters related to width, see my solution below.
Note: this also provides the correct dimensions even with * { box-sizing: border-box }
function getWidth(el, type) {
if (type === 'inner') // .innerWidth()
return el.clientWidth;
else if (type === 'outer') // .outerWidth()
return el.offsetWidth;
let s = window.getComputedStyle(el, null);
if (type === 'width') // .width()
return el.clientWidth - parseInt(s.getPropertyValue('padding-left')) - parseInt(s.getPropertyValue('padding-right'));
else if (type === 'full') // .outerWidth(includeMargins = true)
return el.offsetWidth + parseInt(s.getPropertyValue('margin-left')) + parseInt(s.getPropertyValue('margin-right'));
return null;
}
精彩评论