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

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

Демо

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

Кто-то может сказать, что получение высоты и ширины элемента — это самое просто, что может быть, но я бы так не стал говорить. Особенно, если не знать нюансы, которые присутствуют в самом процессе.

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

Первый блок показывает настоящую высоту и ширину элемента, когда второй показывает ширину/высоту начиная с границ padding, который я прописал в CSS для этих элементов. Смотрите в разделе «Разбор проблемы» (ниже), чтобы понять почему так происходит.

See the Pen WwPbJB by Alexander (@bologer) on CodePen.dark

Разбор проблемы

В jQuery есть методы .width() и .height(), которые помогают взять ширину и высоту любого элемента на странице. Но мало кто знает, что эти методы не показывают настоящие данные если к элементам прописать, например, padding свойство.

Я сделаю скриншот пример выше и перенесу его сюда, чтобы вы понимали о чем идет речь.

Слева учитывается настоящая ширина и высота фиолетового блока (с учетом padding). Справа учитывается ширина блока по границам padding свойства. Оба блока имеют свойства padding с значением 20, то блок со всех сторон отступает на 20 пикселей.

Для блока слева я использовал .outerWidth() и .outerHeight(), которые берут настоящие ширину и высоту элемента. В данном случае, padding: 20px не учитывается.

Для блока справа я использовал .width() и .height(), которые берут внутреннюю ширину и высоту элемента исходя из свойств наложенных на него. padding: 20px в данном случае учитывается.

Послесловие

Если у вас остались какие-либо вопросы — задавайте их ниже под этой записью.