JQuery CSS свойство не работает

Question

JQuery CSS свойство не работает

0

$("#content-container-2").css('min-height', '1000px');
$('#content-container-2').attr('style','min-height:1000px;');

оба не работают. Однако установка этого с помощью таблицы стилей работает очень хорошо. При использовании jquery с указанными выше командами и проверкой свойств css с firebug, они также не показывают, что минимальная высота была установлена вообще. И последнее, но не менее важное: распечатка:

console.log($("#content-container-2").height());
console.log($("#content-container-2").outerHeight());
console.log($("#content-container-2").innerHeight());

возвращает null во всех случаях.

Кто-нибудь знает, почему это так?

John Smith 06 окт. 2013, в 13:31

Источник

0

Можете ли вы добавить JSFiddle? Спасибо
Donovan Charpin 06 окт. 2013, в 11:16
0

убедитесь, что вы включили файл сценария Jquery.
Sachin 06 окт. 2013, в 11:17
3

Вы поместили свой скрипт в $(function () {}) ?
Artyom Neustroev 06 окт. 2013, в 11:17
1

Пожалуйста, предоставьте все сценарии JS
Maciej Treder 06 окт. 2013, в 11:18
0

@ Сачин, я не думаю, что это вернет ноль. Обычно он будет жаловаться на неопределенную функцию $, если jquery не был включен. (Chrome не будет! Он имеет функцию псевдо-jquery. Я не уверен в других браузерах.)
Tyler Scott 06 окт. 2013, в 11:23
0

@john было бы лучше, если бы ты просто поделился скрипкой
PSK 06 окт. 2013, в 11:26
0

Все остальные вещи, связанные с jquery, работают отлично, поэтому я уверен, что включил jquery. Он также включен до вызова этого скрипта, чтобы ответить на любой предстоящий вопрос по этому поводу. console.log ($ ("# content-container-2"); также находит div и находится внутри $ (function () {})
John Smith 06 окт. 2013, в 11:27
0

Лучшее, что вы можете сделать, это выбросить jquery, написать скрипт внизу тела и использовать чистый javascript. document.getElementById ('content-container-2'). style ["min-height"] = "1000px"
Arun Aravind 06 окт. 2013, в 11:29
1

Единственный случай, когда я знаю, что это может произойти, - это одновременное использование нескольких библиотек, таких как MooTools и jQuery. В вашем случае jQuery будет переопределен позднее загруженной библиотекой. Попробуйте и посмотрите, работает ли ваш код с jQuery('selector').css('Your code') , хотя, похоже, это не проблема, так как вы сказали «Все остальные вещи, связанные с jquery, работают просто отлично».
Kiruse 06 окт. 2013, в 11:29

Показать ещё 7 комментариев

Теги:

javascript

jquery

css

4 ответа

Ещё вопросы

Можете ли вы добавить JSFiddle? Спасибо
убедитесь, что вы включили файл сценария Jquery.
Вы поместили свой скрипт в $(function () {}) ?
Пожалуйста, предоставьте все сценарии JS
@ Сачин, я не думаю, что это вернет ноль. Обычно он будет жаловаться на неопределенную функцию $, если jquery не был включен. (Chrome не будет! Он имеет функцию псевдо-jquery. Я не уверен в других браузерах.)
@john было бы лучше, если бы ты просто поделился скрипкой
Все остальные вещи, связанные с jquery, работают отлично, поэтому я уверен, что включил jquery. Он также включен до вызова этого скрипта, чтобы ответить на любой предстоящий вопрос по этому поводу. console.log ($ ("# content-container-2"); также находит div и находится внутри $ (function () {})
Лучшее, что вы можете сделать, это выбросить jquery, написать скрипт внизу тела и использовать чистый javascript. document.getElementById ('content-container-2'). style ["min-height"] = "1000px"
Единственный случай, когда я знаю, что это может произойти, - это одновременное использование нескольких библиотек, таких как MooTools и jQuery. В вашем случае jQuery будет переопределен позднее загруженной библиотекой. Попробуйте и посмотрите, работает ли ваш код с jQuery('selector').css('Your code') , хотя, похоже, это не проблема, так как вы сказали «Все остальные вещи, связанные с jquery, работают просто отлично».

Gabriele Petrioli · Answer 1 · 2013-10-06T09-50-00.000Z

Единственный способ для .height() вернуть null - если элемент не найден.

Если ваш элемент #content-container-2 добавлен на страницу через вызовы ajax, тогда вам нужно будет запустить свой код в обратном вызове успеха вызова ajax.
(то же самое может произойти, если вы используете механизм шаблонов, и шаблон еще не был введен в DOM)

Вам нужно будет убедиться, что $ принадлежит jQuery, а не другой библиотеке

Для отладки попробуйте

var el = $('#content-container-2');
console.log( $ === jQuery, $.fn.jquery, el, el.height() );

Я собирался попросить войти элемент в сценарий. Ведение журнала вручную запускает код при различных обстоятельствах, создавая ложное представление о правильности ...
@ Derija93 Я тоже так думал, поэтому предлагаю отладку, которая прояснит нас. В качестве альтернативы ОП должен опубликовать живую версию страницы ..
Не могу поверить, что я забыл, что тоже хотел попросить живую демонстрацию. Хотя для ОП лучше получить опыт отладки своего кода.

Tyler Scott · Answer 2 · 2013-10-06T10-16-00.000Z

0

Вероятно, это означает, что ваш jquery не находит этот конкретный идентификатор. Вы уверены, что правильно написано, и уверены, что это не класс, а не id?

jQuery возвращает null, если совпадений нет.

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

$(function(){
     //Your code goes here.
});

Все, что внутри этого кодового блока будет выполнено после загрузки страницы.

Tyler Scott 06 окт. 2013, в 10:16

0

Я уверен. Вот почему я так смущен этим. Как написано выше, этот скрипт вызывается после включения jquery, он оборачивается внутри $ (function () {...}), когда я захожу на console.log ($ ("content-container-2")), когда консоль печатает меня из div со всеми его свойствами, однако, стиль просто не будет применяться.
John Smith 06 окт. 2013, в 11:30
0

Кроме того, даже если jQuery не соответствует селектору, он просто возвращает пустую оболочку, а не null . jsBin
Kiruse 06 окт. 2013, в 11:40
0

@ Derija93 Возвращает значение NULL после выполнения выбора и вызова функции.
Tyler Scott 06 окт. 2013, в 11:43
0

Если он уверен, что этот элемент существует, то функции, возвращающие null должны возвращать числовое значение. Особенно, если элемент не является частью DOM (в этом случае он не будет доступен с помощью селектора, но давайте предположим, что он был создан динамически) .height() вернет 0. Вы правы, если элемент не был не соответствуют этим функциям возвращаемое значение null . Но это не совсем так.
Kiruse 06 окт. 2013, в 11:49
0

@JohnSmith, я не уверен, почему это не будет применять стиль. Однако обходным решением будет определить класс в вашем CSS, который находится ниже на листе, а затем добавить этот класс в контейнер. Затем он будет применять стили из листа по классам. В противном случае я рекомендую протестировать его с последним jquery.
Tyler Scott 06 окт. 2013, в 11:51
0

Я также рекомендую вручную добавить стиль, чтобы увидеть, можно ли это сделать самостоятельно. Если стиль все еще не применяется, то это что-то другое (ошибка, сценарий и т. Д.) Мешает.
Tyler Scott 06 окт. 2013, в 11:55

Показать ещё 4 комментария

araj · Answer 3 · 2013-10-06T10-06-00.000Z

0

Вы должны указать min-height так, как это понимает javascript:

$("#content-container-2").css({'minHeight': '1000px'});

araj 06 окт. 2013, в 10:06

0

JavaScript прекрасно понимает 'min-height' ...
Gabriele Petrioli 06 окт. 2013, в 12:05
0

Синтаксис JavaScript: object.style.minHeight = "10px" [ w3schools.com/cssref/pr_dim_min-height.asp](W3cSchool)
araj 06 окт. 2013, в 12:11
0

это необходимо, только если вы обращаетесь к нему через свойство style . Не через методы jQuery.
Gabriele Petrioli 06 окт. 2013, в 12:16
0

Попробуйте и убедитесь сами, мой друг
araj 06 окт. 2013, в 12:19
0

пожалуйста, смотрите jsfiddle.net/VQ3jM
Gabriele Petrioli 06 окт. 2013, в 12:21
0

Хаха, ты выиграл. сожалею
araj 06 окт. 2013, в 12:24
0

:) LOL не беспокойся
Gabriele Petrioli 06 окт. 2013, в 12:25

Показать ещё 5 комментариев

Hossain Muctadir · Answer 4 · 2013-10-06T09-47-00.000Z

Чтобы установить атрибут:

$('#content-container-2').attr('style','min-height:1000px;');

Получить значение:

$('#content-container-2').attr('style');

Если не работает, проверьте правильность ссылки на jquery.