jQuery сам по собі дуже простий, в ньому майже нічого немає складного, за винятком деяких функцій / методів, про які знає не кожен новачок. У цьому записі я покажу як отримати справжню ширину і / або висоту у будь-якого елементу.
Якщо ви хочете правильно отримувати ширину екрану / елемента за допомогою jQuery, тоді цей запис саме для вас. Я детально розпишу всі проблеми, які можуть виникнути і скажу як їх вирішити.
Я створив невелику демо, за допомогою якого я хочу наочно показати, чому я вирішив написати цю запис.
Хтось може сказати, що отримання висоти і ширини елемента - це саме просто, що може бути, але я б так не говорив. Особливо, якщо не знати нюанси, які присутні в самому процесі.
У прикладі нижче є два блоки. Зліва фіолетовий, а праворуч помаранчевий. За допомогою jQuery, всередині кожного з них я написав ширину і висоту блоку двома різними методами.
Перший блок показує справжню висоту і ширину елемента, коли другий показує ширину / висоту починаючи з меж padding. який я прописав в CSS для цих елементів. Дивіться в розділі «Розбір проблеми» (нижче), щоб зрозуміти чому так відбувається.
В jQuery є методи .width () і .height (). які допомагають взяти ширину і висоту будь-якого елементу на сторінці. Але мало хто знає, що ці методи не показують справжні дані якщо до елементів прописати, наприклад, padding властивість.
Я зроблю скріншот приклад вище і перенесу його сюди, щоб ви розуміли про що йде мова.
Зліва враховується справжня ширина і висота фіолетового блоку (з урахуванням padding). Справа враховується ширина блоку по межах padding властивості. Обидва блоки мають властивості padding з значенням 20, то блок з усіх боків відступає на 20 пікселів.
Для блоку зліва я використовував .outerWidth () і .outerHeight (). які беруть справжні ширину і висоту елемента. В даному випадку, padding: 20px не враховується.
Для блоку справа я використовував .width () і .height (). які беруть внутрішню ширину і висоту елемента виходячи з властивостей накладених на нього. padding: 20px в даному випадку враховується.
Якщо у вас залишилися які-небудь питання - задавайте їх нижче під цим записом.