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

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

<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.

 alexandra siracevska03 мая 2012 г., 03:01
Да, я изучаю jQuery, поэтому я и спросил.
 dweiss03 мая 2012 г., 02:59
Вы можете получить аналогичные результаты, но в jQuery нет точного эквивалента clientHeight. Почему вы не можете смешать их? Вы все еще можете использовать JS clientHeight при использовании jQuery.

Ответы на вопрос(3)

Решение Вопроса

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 siracevska03 мая 2012 г., 03:02
Спасибо за информацию.
 03 мая 2012 г., 03:03
Добро пожаловать
 03 мая 2012 г., 03:04
Правильно, я бы окончательно не полагался на это, если желательна поддержка устаревших браузеров.
 03 мая 2012 г., 03:03
Я думаю, что, даже если "поддерживается", безопаснее использовать эти стандартные атрибуты CSS (высота и отступ).

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

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

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 медиа-запросов возможно, это заслуживает изучения.

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

Ваш ответ на вопрос