Получение ширины элемента div
HTML:
<a id="postanad" href="postad.php">Make a Post</a>
CSS:
#header #postanad {
position: absolute;
top: 50px;
left: 250px ;
background: #000 url(postad.gif) repeat-x 0% 100%;
font: bold 19px Tahoma, 'trebuchet MS', Sans-serif;
padding: 5px;
}
Как определить размер в пикселях /ems, который принимает элемент div, чтобы я мог сделать фоновое изображение postad.gif одинаковой ширины?
Просто чтобы прояснить, я не хочу определять ширину динамически, а просто хочу знать, сколько места занимает, чтобы я мог нарисовать фоновое изображение в PS.
6 ответов
Если вы заинтересованы в измерении ширины элемента на странице, вы можете использовать аддон Measure IT в Firefox:
Если вы знакомы с jQuery, вы можете просто использовать $("#postanad"). Width().
Если кто-то хочет просто получить ширину div с помощью простого использования javascript:
document.getElementById('div_id').clientWidth;
для большего количества возможностей посмотрите здесь.
CSS не является "языком программирования". Вы не можете принимать решения, собирать данные или манипулировать чем-то, для чего язык не предназначен. Если вы хотите сделать это, javascript - ваш лучший выбор.
Что именно вы хотите, чтобы произошло с фоном? Возможно, мы сможем помочь вам получить решение только для CSS, если будем знать ваши требования.
Способ jQuery, как сказал @orthod0ks, заключается в использовании функции width(). Способ CSS был бы объявить width а также height
ИЛИ, другой способ CSS будет:
Вы также можете поместить фон на div (как background: red;), сделайте скриншот и вставьте в PS, чтобы увидеть, насколько он велик.
Наконец, в Firefox есть плагин (MeasureIt). Это довольно полезно для определения размеров вещей в терминах пикселей. Таким образом, вы должны изучить это, если оба решения не являются жизнеспособными для вас.
Удачи!
Является ли рассматриваемый div динамически перерисовывается? Потому что, если нет, проще всего установить высоту и ширину в стиле #header #postanad.