Как узнать ширину блока css

Как получить ширину элемента в пикселях?

Есть элемент div , в CSS файле у него прописано свойство width: 90% . Kак в JS получить ширину этого элемента в пикселях?

Отслеживать
51.6k 199 199 золотых знаков 59 59 серебряных знаков 242 242 бронзовых знака
задан 7 мая 2018 в 20:11
Don2Quixote Don2Quixote
1,705 3 3 золотых знака 12 12 серебряных знаков 26 26 бронзовых знаков
Если есть jquery $(‘div’).innerWidth();
7 мая 2018 в 20:20
@AndrewB Мне на чистом нужно было, но спасибо 🙂
8 мая 2018 в 20:42

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

В зависимости, какую ширину вы хотите получить, можно использовать различные свойства:

• offsetWidth — это ширина блока, включая все padding, border, но без margin.
• clientWidth — это ширина блока, включая padding, но без border, margin и без scroll. Если блоки инлайновые, то ширина блока будет равна 0.
• getBoundingClientRect().width — это ширина блока высчитывается по принципу clientWidth , но даёт дробное число.

Так что, в данном случае можно ответить тремя ответами:

document.querySelector('.myDiv').offsetWidth document.querySelector('.myDiv').clientWidth document.querySelector('.myDiv').getBoundingClientRect().width 

Как посчитать ширину блока с помощью функции calc() в css?

Допустим есть div у которого в css прописано ширина 25% и он в пикселях будет 350px (ширина динамическая и значение примерное). Можно ли на css сделать другому елементу margin-left: calc(ширина первого блока/2); то есть разделить значение на 2.

• Вопрос задан более трёх лет назад
• 4489 просмотров

1 комментарий

Оценить 1 комментарий

Ankhena @Ankhena Куратор тега CSS

Не все понятно, как соотносятся эти блоки, а код Вы не выкладываете.

Если у блоков разные родители, то JS.

Если родитель один, то зачем для этого calc?
Есть родитель.
У одного блока ширина 25% от родителя.
У второго блока должен быть отступ в половину ширины первого, т.е. 25% пополам, т.е. 12.5%.

Как узнать ширину блока css

Размеры элементов задаются с помощью свойств width (ширина) и height (высота).

Значение по умолчанию для этих свойств — auto , то есть браузер сам определяет ширину и высоту элемента. Можно также явно задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:

width: 150px; width: 75%; height: 15em;

Пиксели определяют точные ширину и высоту. Единица измерения em зависит от высоты шрифта в элементе. Если размер шрифта элемента, к примеру, равен 16 пикселей, то 1 em для этого элемента будет равен 16 пикселям. То есть если у элемента установить ширину в 15em, то фактически она составит 15 * 16 = 230 пикселей. Если же у элемента не определен размер шрифта, то он будет взят из унаследованных параметров или значений по умолчанию.

Процентные значения для свойства width вычисляются на основании ширины элемента-контейнера. Если, к примеру, ширина элемента body на веб-странице составляет 1000 пикселей, а вложенный в него элемент имеет ширину 75%, то фактическая ширина этого блока составляет 1000 * 0.75 = 750 пикселей. Если пользователь изменит размер окна браузера, то ширина элемента body и соответственно ширина вложенного в него блока div тоже изменится.

Процентные значения для свойства height работают аналогично свойству width, только теперь высота вычисляется по высоте элемента-контейнера.

     div.outer < width: 75%; height: 200px; margin: 10px; border: 1px solid #ccc; background-color: #eee; >div.inner  

В то же время фактические размеры элемента могут в итоге отличаться от тех, которые установлены в свойствах width и height . Например:

     div.outer  
Определение фактического размера в CSS 3
   

Как видно на скриншоте, в реальности значение свойства width — 200px — определяет только ширину внутреннего содержимого элемента, а под блок самого элемента будет выделяться пространство, ширина которого равна ширине внутреннего содержимого (свойство width) + внутренние отступы (свойство padding) + ширина границы (свойство border-width) + внешние отступы (свойство margin). То есть элемент будет иметь ширину в 230 пикселей, а ширина блока элемента с учетом внешних отступов составит 250 пикселей.

Подобные расчеты следует учитывать при определении размеров элементов.

С помощью дополнительного набора свойств можно установить минимальные и максимальные размеры:

• min-width : минимальная ширина
• max-width : максимальная ширина
• min-height : минимальная высота
• max-height : максимальная высота

min-width: 200px; width:50%; max-width: 300px;

В данном случае ширина элемента равна 50% ширины элемента-контейнера, однако при этом не может быть меньше 200 пикселей и больше 300 пикселей.

Переопределение ширины блока

Свойство box-sizing позволяет переопределить установленные размеры элементов. Оно может принимать одно из следующих значений:

content-box : значение свойства по умолчанию, при котором браузер для определения реальных ширины и высоты элементов добавляет берет соответственно значения свойств width и height элемента . Например:

width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: content-box;

В данном случае элемент будет иметь ширину в 200 пикселей и высоту в 100 пиксей.

width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: padding-box;

width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: border-box;

Например, определим два блока, которые отличаются только значением свойства box-sizing:

     div < width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; >div.outer1 < box-sizing: content-box; >div.outer2  
Определение фактического размера в CSS 3
 
Определение фактического размера в CSS 3
   

В первом случае при определении размеров блока к свойствам width и height будут добавляться толщина границы, а также внутренние и внешние отступы, поэтому первый блок будет иметь большие размеры:

Как узнать ширину

Как ограничить ширину контента (текста не затрагивая ширину фона)
Создал базовую разметку в css grid и появилась идея чтоб контент сайта ограничился в ширину в.

Возможно ли узнать ширину объекта в css
Подскажите, можно ли узнать ширину объекта в css? В примере я хочу установить тень для.

Как узнать ширину?
У меня есть 2 вопроса: 1) Как узнать ширину элемента, если это свойство задается автоматически;.

228 / 208 / 27
Регистрация: 18.02.2010
Сообщений: 1,985

Я сам тык, даставай отладчик, попробую угадать.
1) Элемент inline, ширина нечёткая(зависит в основном от самого контента, как по моей логике элементы с инлайн обладают такой же шириной, как «чёткость кода», если вы его пишите на js).
2) Ширина блока 120px, т.к. только такие старперы, которые пишут этот тест не обнулились на ресете до box-sizing: border-box; с которым всегда работают такие люди, как «белые» и она почему то начала складываться из падинга и ширины, т.е. 120+15+25=160px.
3) 460px in border-box we trust.

1372 / 785 / 262
Регистрация: 17.07.2021
Сообщений: 1,670
Записей в блоге: 11

Сообщение от v_rina

Я новичок, прохожу обучение.

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

Сообщение от v_rina

Рассчитайте ширину элемента в следующем коде:

Свойства, связанные с размерами (width, height) не применимы к inline, но можно воспользоваться getBoundingClientRect()

Сообщение от v_rina

2.Рассчитайте ширину элемента в следующем коде:

display block делает элемент блочными теперь зависит от значения box-sizing, если значение по умолчанию content-box ширина 162, если занчение border-box значение 120

Сообщение от v_rina

3.Рассчитайте ширину контентной области элемента .content в следующем коде:

460px потому что блочные занимают по умолчанию всю доступную им ширину, это в данном случае 500 — 20*2(paddings right + left)

Добавлено через 1 минуту

Сообщение от Mailo