Вопрос по javascript, jquery – простой javascript для jquery - clientHeight

7

У меня есть следующий скрипт

<code>(function(win){
    var doc = win.document;
    if (doc.querySelector && doc.addEventListener) {
        var toggler = doc.querySelector('.toggle-menu')
        var menu = doc.querySelector('.main-nav ul');
        menu.style.height = '0px';
        toggler.addEventListener('click',function(e) {
            e.preventDefault();
            if (menu.style.height == '0px') {
                menu.style.height = 'auto';
                if (menu.clientHeight != 0) {
                    menu.style.height = menu.clientHeight+'px';
                }
            } else {
                menu.style.height = '0px';
            }
        });
    }
})(this);
</code>

Какой будет jQuery-версия этого скрипта, поскольку я не могу найти jQuery, эквивалентный clientHeight.

Вы можете получить аналогичные результаты, но в jQuery нет точного эквивалента clientHeight. Почему вы не можете смешать их? Вы все еще можете использовать JS clientHeight при использовании jQuery. dweiss
Да, я изучаю jQuery, поэтому я и спросил. alexandra siracevska

Ваш Ответ

3   ответа
2

.рост(), Он вернет высоту элемента.

var menu = $('.main-nav ul');
....
menu.height()+'px';
Александра уже использует .height в своем сценарии, поэтому я предполагаю, что она уже знает о .height, но знает, что это не то же самое.
@dweiss Вопрос был и остается «к jQuery». QuerySelector должен заменить шипение в jQuery - селекторах.
0

September 2016Я вижу, что jQuery (версия 3.1.0) по-прежнему не включает свой собственный метод для полученияelement.clientWidth а такжеelement.clientHeight нормализовано в разных браузерах.

Тем не менее, расследуя по разным источникам, получаетсяthese JavaScript native properties are well supported на большинстве браузеров, используемых сегодня.
НаMDN clientHeight статья Я могу прочитать, что он поддерживается в Chrome, Firefox (Gecko), Internet Explorer, Opera, Safari (WebKit), но версия не указана.

QuirksMode указываетэти свойства поддерживаются в IE 9+ и других браузерах применительно кwindow а такжеdocument объекты.

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

http://www.quirksmode.org/dom/tests/elementdimensions.html

Наэта статья рассматривает свойство clientHeight В IE важны различия между физическими пикселями и логическими пикселями & lt; 8 и IE & gt; = 8:

In Internet Explorer earlier than version 8, it retrieves the height in physical pixel size, while from version 8, it returns the height in logical pixel size.

Предполагая, что использование зума в браузерах в основном используется на мобильных устройствах, я думаю, что:

it is safe enough using element.clientWidth and element.clientHeight for desktop audience pages/web apps; for cross-device pages/web apps the usage of relative measure units (e.g. em's) could solve the gap between physical and logical pixels.

Для более простого управления размерами,em блок может улучшить кроссплатформенную разработку (W3 org спецификации на юниты и предварительные проекты), который, кажется,поддерживается в современных браузерах. I still have no experience on relative measure units in CSS media-queries, but reading this интересная статья о лучшей единице измерения для CSS медиа-запросов возможно, это заслуживает изучения.

Любое мнение по этим соображениям приветствуется.

9

clientHeight не является свойством jQuery. Он был представлен в Internet Explorer, но не является частью спецификаций W3C. Похоже, что это поддерживается только в Firefox и Internet Explorer. Я только что проверил, что он работает в последней версии Chrome. Не уверен, что результаты являются стандартными для всех браузеров, хотя ссылка, которую я разместил ниже, предлагает нет.

Кроме того, Mozilla предлагает использовать следующую формулу для браузеров, которые ее не поддерживают:

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

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

Источники:

clientHeight/clientWidth returning different values on different browsers https://developer.mozilla.org/en/DOM/element.clientHeight
Спасибо за информацию. alexandra siracevska
Я думаю, что, даже если "поддерживается", безопаснее использовать эти стандартные атрибуты CSS (высота и отступ).
Добро пожаловать
Правильно, я бы окончательно не полагался на это, если желательна поддержка устаревших браузеров.

Похожие вопросы