JQuery.css() - marginLeft против margin-left?

С jQuery.css() Мне сказали, что я могу использовать следующие две функции для тех же результатов:

$(".element").css("marginLeft") = "200px";

$(".element").css("margin-left") = "200px";

Я всегда использовал marginLeft, поскольку это то, что используется в документации:

http://api.jquery.com/css/

Сокращенные свойства CSS (например, маржа, фон, граница) не являются поддерживается. Например, если вы хотите получить рендер, используйте: $(elem).css('marginTop') и $(elem).css('marginRight'), и так на.

Почему jQuery разрешено для marginLeft, а также margin-left? Это кажется бессмысленным и использует больше ресурсов для преобразования в CSS margin-left?

Ответ 1

jQuery базовый код передает эти строки в DOM, что позволяет вам указать имя свойства CSS или имя свойства DOM очень похожим образом:

element.style.marginLeft = "10px";

эквивалентно:

element.style["margin-left"] = "10px";

Почему jQuery разрешен для marginLeft, а также margin-left? Это кажется бессмысленным и использует больше ресурсов для конвертации в margin-left?

jQuery не делает ничего особенного. Он может изменять или проксировать некоторые строки, которые вы передаете на .css(), но на самом деле не было никакой работы с командой jQuery, чтобы разрешить передачу любой строки. Нет дополнительных ресурсов, потому что DOM выполняет эту работу.

Ответ 2

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

$(".element").css( { marginLeft : "200px", marginRight : "200px" } );

поскольку вы можете видеть, что свойство не указано как строки. JQuery также поддерживает использование строки, если вы все еще хотите использовать тире, или для свойств, которые, возможно, не могут быть установлены без тире, поэтому все еще работает...

$(".element").css( { "margin-left" : "200px", "margin-right" : "200px" } );

без кавычек здесь, javascript не будет правильно анализировать, поскольку имена свойств не могут иметь тире в них.

EDIT: Похоже, что JQuery фактически не делает различие его левым, вместо этого он просто передает свойство, указанное для DOM, чтобы заботиться, скорее всего, с помощью style[propertyName];

Ответ 3

jQuery просто поддерживает способ написания CSS.

Кроме того, он гарантирует, что независимо от того, как браузер вернет значение, будет понятно

jQuery может одинаково интерпретировать CSS и DOM-форматирование многословные свойства. Например, jQuery понимает и возвращает правильное значение для .css('background-color') и .css( 'BackgroundColor').

Ответ 4

когда используется marginLeft:

$("div").css({
    marginLeft:'12px',
    backgroundPosition:'10px -10px',
    minHeight: '40px'
});

Как вы можете видеть, атрибуты с дефисом на нем преобразуются в формат camelcased. Использование margin-left из предыдущего блока кода выше сделало бы JavaScript-бонкеров, потому что он будет рассматривать дефис как операцию для вычитания.

когда используется margin-left:

$("div").css("margin-left","12px").css("background-position","10px -10px").css("min-height","40px");

Теоретически оба блока кода будут делать то же самое. Мы можем разрешить дефисы во втором блоке, потому что это строковое значение по сравнению с первым блоком, это несколько объект.

Теперь это должно иметь смысл.

Ответ 5

Позднее ответить, но никто не указал, что свойство css с тире не будет работать в объявлении объекта в jquery:

.css({margin-left:'200px'});//won't work
.css({marginLeft:'200px'});//works

Итак, не забудьте использовать кавычки, если вы предпочитаете использовать свойство стиля в стиле jquery.

.css({'margin-left':'200px'});//works

Ответ 6

Привет, я попробовал это, он работает.

$("#change_align").css({"margin-top":"-39px","margin-right":"0px","margin-bottom":"0px","margin-left":"719px"});