Допустим у меня есть блок с длиной и шириной 100px, и с границами 2px.
Как мне узнать точную ширину блока , то есть без границ и прочих атрибутов?
Пробовал свойства offserWidth, clientWidth, scrollWidth
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуДопустим у меня есть блок с длиной и шириной 100px, и с границами 2px.
Как мне узнать точную ширину блока , то есть без границ и прочих атрибутов?
Пробовал свойства offserWidth, clientWidth, scrollWidth
const element = document.querySelector('div');
console.log('clientWidth = content + padding:', element.clientWidth);
console.log('offsetWidth = content + padding + border:',element.offsetWidth);
const styles = getComputedStyle(element);
console.log('clientWidth - paddingRight - paddingLeft = content:', element.clientWidth - parseInt(styles.paddingRight) - parseInt(styles.paddingLeft));
console.log('width = content:', parseInt(styles.width));
body {
height: 230px;
}
.element {
width: 100px;
height: 50px;
padding: 40px;
border: 10px solid rgba(200, 100, 0, 0.9);
background-color: rgba(200, 100, 0, 0.3);
box-shadow: inset 0 0 0 40px rgba(200, 100, 0, 0.3);
}
<div class='element'></div>