jQuery.css() не относится к элементу

Question

Недавно я пытался вникать в передовые (ну для меня) концепции программирования, такие как абстракция и функциональное программирование и т. Д. Это привело меня к экспериментированию с функциями w/anon.

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

Ни консоли Chrome, ни FF не вызывают никаких ошибок, поэтому я должен спросить экспертов.

Я сделал скрипку, но это было не очень хорошо. Я просто собираюсь связать ресурсы, задействованные на сайте dev.

Это мой сайт-разработчик, который я использую для воспроизведения/экспериментирования и тестирования новых вещей.

http://dev/kenstowell.net

Файл JS: http://dev.kenstowell.net/scripts/scripts.js

Все можно найти через консоль отладчика, конечно.

Итак, вот что предполагаемое поведение:

1. На (window).load, initDOM() называется.

   $(window).load(function(){ //Style Initial Dom Elements initDOM(); });

2. Внутри initDom(), я пытаюсь установить верхний предел по отношению к родительскому контейнеру с помощью вызова setElemMargin() и подач его с соответствующим Params.

   setElemMarg("#main-content-one", "#intro-text", "#intro-text", "margin-top");

3. setElemMarg() получает высоту поставляемой арг и использует их, чтобы вычислить запас, чтобы быть установлено в .css() карты.

   var setElemMarg = function(elem1, elem2, elemTrgt, propName){
var margH = (getH(elem1) - getH(elem2))/2;
$(elemTrgt).css({propName : margH});
console.log(elem1, elem2, elemTrgt, propName, margH); }

   var getH = function(elem){ return $(elem).height(); console.log($(elem).height()); }

4. применять рассчитанную маржу margin-top. (Сверху методом)

   $(elemTrgt).css({propName : margH});

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

Кен

Answer 1

Проблема заключается в вашей setElemMarg() функции:

var setElemMarg = function(elem1, elem2, elemTrgt, propName) { 
    var margH = (getH(elem1) - getH(elem2))/2; 

    $(elemTrgt).css({propName : margH}); // <-- Here. 

    console.log(elem1, elem2, elemTrgt, propName, margH); 
} 

Буквальный синтаксис объекта вы используете в вашем вызове css() результатов в JQuery попытке обновить свойство propName стиля вместо свойства, имя которого хранится в propName.

Вы можете использовать кронштейн обозначения для решения этой проблемы:

var styleProps = {}; 
styleProps[propName] = margH; 
$(elemTrgt).css(styleProps); 

Или просто называют два аргумента формы css():

$(elemTrgt).css(propName, margH); 

Answer 2

Поскольку setElemMarg называется в initDOM в window.load событие, то jquery/dom не гарантируется быть готовым. Вы должны вызвать эту функцию в событии загрузки документа

Answer 3

Почему бы не попробовать использовать $(element).attr('style','css_values');?