Лучший способ получить ширину границы в javascript?

Я использую это:

var playGard =document.getElementsByClassName("playGard")[0];

var borderW= getComputedStyle(playGard,null).getPropertyValue('border-left-width').substr(0,2);

Я получаю значение «10».

Есть ли более короткий путь в javascript?

(Получить значение в виде числа)


javascript css getcomputedstyle
person Moran    schedule 23.01.2016    source источник
comment
Кажется, это правильно, это способ получить вычисляемый стиль   -  person adeneo    schedule 23.01.2016
comment
У вас есть ответ в самом вопросе!   -  person Nitin Varpe    schedule 23.01.2016
comment
Возможный дубликат Как получить ширину границы в jQuery/javascript   -  person Raviteja    schedule 23.01.2016
comment
document.getElementById(ppp).style.border.. это даст вам границу   -  person user0946076422    schedule 23.01.2016
comment
Вы можете немного сократить его в чистом JS: var borderW = parseInt(getComputedStyle(playGard).borderLeftWidth);   -  person Siguza    schedule 23.01.2016
comment
@Raviteja В этом вопросе нет упоминания о jQuery ...   -  person Siguza    schedule 23.01.2016
comment
@PankajSewalia Это даст только значения, которые фактически находятся в атрибуте style="..." этого элемента, но не значения, примененные из тегов <style> или внешних файлов CSS.   -  person Siguza    schedule 23.01.2016
comment
@Моран, ты хочешь это только в javascript ?? вы используете jquery ??   -  person Sajad Karuthedath    schedule 23.01.2016
comment
@SajadKaruthedath Да, используя только javascript.   -  person Moran    schedule 23.01.2016
comment
@Моран хорошо, тогда я удалю свой ответ   -  person Sajad Karuthedath    schedule 23.01.2016

Ответы (1)


arrow_upward
2
arrow_downward

Очевидно, что substr(0, 2) не очень хорошая идея, потому что она не будет работать, если ширина меньше 10 или больше 100.

Вместо этого просто удалите строку «px» (если она есть; ее может не быть, если значение равно 0):

+val.replace('px', '')

Ведущий + должен преобразовать это в число.

Но почему?

Более интересный вопрос заключается в том, почему вы пытаетесь получить ширину границы. Что ты собирался с ним делать? Использование getComputedStyle немного анти-шаблон. Это часто указывает на то, что вы пытаетесь поддерживать состояние приложения в CSS, что никогда не бывает хорошей идеей.

person Community    schedule 23.01.2016
comment
Это для получения ширины/высоты без границы. Я играю в небольшую игру с кругом, что если коснуться границы, круг изменится на красный. - person Moran; 23.01.2016