Доступ к правилам CSS из JavaScript

Question

Доступ к правилам CSS из JavaScript

0

Предположим, что у меня есть следующее.

HTML:

<div id="foo"></div>

CSS:

#foo{
   width: 150px;
}

JS:

document.getElementById("foo").style.width //Equals to "" instead of 150px
$("#foo").css("width") //equals to the expected "150px"

или это JSFiddle. Почему мы можем получить доступ к ширине элемента, используя jQuery, но не используя vanilla JS? Это потому, что внешние правила CSS не являются частью DOM?

leonsas 24 сен. 2013, в 04:47

Источник

Теги:

javascript

jquery

html

css

dom

2 ответа

3

Попробуйте offsetWidth. Когда вы пытаетесь получить доступ к style.width, он даст вам только ширину, назначенную свойству стиля элемента. Но в вашем случае ему назначается ширина по правилу css.

document.getElementById("foo").offsetWidth;

скрипка

Edit: clientWidth, вероятно, будет более уместным, так как он дает вам внутреннюю ширину элемента, где offsetWidth также рассматривает границы, поля.

PSL 23 сен. 2013, в 23:56

1

offsetWidth будет включать границы и поля и, следовательно, не эквивалентен width CSS. clientWidth будет более подходящим, но все равно не обязательно отражает ширину CSS, всегда (полосы прокрутки).
nmaier 24 сен. 2013, в 02:11
0

@nmaier Да, я забыл о clientWidth, только что запутался в обоих. Спасибо Обновлено.
PSL 24 сен. 2013, в 02:16

Ещё вопросы

offsetWidth будет включать границы и поля и, следовательно, не эквивалентен width CSS. clientWidth будет более подходящим, но все равно не обязательно отражает ширину CSS, всегда (полосы прокрутки).
@nmaier Да, я забыл о clientWidth, только что запутался в обоих. Спасибо Обновлено.

nmaier · Accepted Answer · 2013-09-23T23-05-00.000Z

Используйте getComputedStyle. Смотрите эту обновленную скрипту:

computedWidth = window.getComputedStyle(document.getElementById("foo"), null).
                getPropertyValue("width");

elem.style просто вернет вам встроенные стили, связанные с элементом, то есть содержимое атрибута style="".