как узнать ширину без учета padding и border в javascript

457

29 июня 2017, 05:18

Мне нужно узнать ширину блока без учета padding без JQuery при этом это должно указываться только в пикселях и быть числом.

document.body.onload = function() { 
alert(document.getElementsByClassName('progressbar').width); 
}

.progressbar { 
  width:20%; 
  height:100px; 
  padding:10px; 
  background:black; 
} 
.progressbar .progress { 
  width:100%; 
  height:100%; 
  background:red; 
}

<div class="progressbar"> 
		<div class="progress"></div> 
	</div>

Answer 1

Функция .getComputedStyle() вернет окончательные значения свойств, применяемые к элементу. При этом все размеры приводятся к пикселям, например width: 212px или font-size: 16px. Чтобы преобразовать к числу используем .parseInt()

var computedStyle = getComputedStyle(document.getElementById('test'), null) 
var width = parseInt(computedStyle.getPropertyValue('width')); 
console.log(width);

div { 
  height: 50px; 
  padding: 50px; 
  width: 100%; 
}

<div id="test"></div>

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Команды JavaScript из адресной строки

Возможно ли как-то запретить выполнение JavaScript из адресной строки? То есть, запросы вида:

483

javascript

Сделать кроссдоменный запрос к бекэнду

Помогите пожалуйста решить проблему с кроссдоменным запросомЯ расположил бекенд на одном сервере, а фронтэнд на другом

306

javascript

phonegap клавиатура закрывает поле ввода

делаю на framework7 и появилась проблема, если по полю тапаю, которое низко, то появляющаяся клавиатура перекрывает поле и не видно что вводишькак...

415

javascript

Пройтись циклом в теле шаблонной строки

ПриветМожно ли пройтись циклом по массиву внутри шаблонной строки? Например, есть массив:

481