jQuery.css() 不适用于元素

Question

最近我一直在尝试深入研究高级（对我来说很好）编程概念，例如抽象和函数式编程等。这让我开始尝试使用匿名函数。

我有一种情况，动态生成的值没有通过使用.css({}) 的匿名函数应用于目标元素。我认为这与我研究中带有对象文字的错误翻译有关。

Chrome 和 FF 控制台都没有抛出任何错误，所以我想请教专家。

我做了一个小提琴，但效果不是很好。我只是要链接开发站点上涉及的资源。

这是我用来玩/实验和尝试新事物的开发网站。

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() 并为其提供适当的参数来设置与父容器相关的上边距。

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

3. setElemMarg() 获取提供的 args 的高度并使用它们来计算要在 .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

为什么不尝试使用$(element).attr('style','css_values');？

Answer 3

由于在 window.load 事件中的 initDOM 中调用了 setElemMarg，因此不保证 jquery/dom 准备就绪。需要在文档加载事件中调用该函数