Question

最近，我一直在努力深入研究高级（对我来说）编程概念，如抽象和函数式编程等。这使我尝试了w / anon函数。

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

Chrome和FF控制台都没有丢失任何错误，所以我在这里请专家们。

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

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

http://dev/kenstowell.net

js文件：http://dev.kenstowell.net/scripts/scripts.js

当然，可以通过调试器控制台找到所有内容。

好的，这就是预期的行为：

在(window).load上，initDOM()被调用。

$(window).load(function(){ //Style Initial Dom Elements initDOM(); });
在initDom()内，我尝试通过调用setElemMargin()并为其提供相应的参数来设置与父容器相关的上边距。

setElemMarg("#main-content-one", "#intro-text", "#intro-text", "margin-top");
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()); }
将计算的保证金应用于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中的属性。< / p>

您可以使用括号表示法来解决此问题：

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准备就绪。您需要在文档加载事件

中调用此函数

jQuery.css（）不适用于元素

3 个答案: