[英]jQuery.css() not applying to element
Recently I have been trying to delve into advanced (well for me) programming concepts like abstraction and functional programming etc. This has led me to experimenting w/ anon functions. 最近,我一直在努力深入研究高级(对我来说)编程概念,如抽象和函数式编程等。这使我尝试了w / anon函数。
I have a situation where dynamically generated values are not being applied to a targeted element via an anonymous function using .css({})
. 我有一种情况,动态生成的值没有通过使用
.css({})
的匿名函数应用于目标元素。 I think it has something to do with false translations w/ object literals from my research. 我认为这与我的研究中的对象文字的错误翻译有关。
Neither Chrome nor FF consoles are throwing any errors so here I am to ask the experts. Chrome和FF控制台都没有出现任何错误,所以我在这里问专家。
I made a fiddle, but it was not working very well. 我做了一个小提琴,但效果不好。 I am just going to link the resources involved on the dev site.
我只想链接开发站点上涉及的资源。
This is my dev site that I use to play/experiment and try out new things. 这是我用来玩/试验和尝试新事物的开发网站。
http://dev/kenstowell.net HTTP://dev/kenstowell.net
The js file: http://dev.kenstowell.net/scripts/scripts.js js文件: http : //dev.kenstowell.net/scripts/scripts.js
Everything can be found through the debugger console, of course. 当然,一切都可以通过调试器控制台找到。
Ok, so here is what the intended behavior is: 好的,所以这是预期的行为:
On the (window).load
, initDOM()
is called. 在
(window).load
initDOM()
, initDOM()
。
$(window).load(function(){ //Style Initial Dom Elements initDOM(); });
Inside of initDom()
, I attempt to set the top margin in relation to the parent container by calling setElemMargin()
and supplying it with the appropriate params. 在
initDom()
内部,我尝试通过调用setElemMargin()
并为其提供适当的参数来设置相对于父容器的上边距。
setElemMarg("#main-content-one", "#intro-text", "#intro-text", "margin-top");
setElemMarg()
gets the height of the supplied args and uses them to calculate the margin to be set in the .css()
map. 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()); }
apply the calculated margin to margin-top
. 将计算的保证金应用于
margin-top
。 (from above method) (从上面的方法)
$(elemTrgt).css({propName : margH});
Thanks to anyone who looks at this. 感谢任何看过这个的人。 Please feel free to give me some constructive critique.
请随意给我一些建设性的批评。 Maybe some that you wish you had when you were a budding developer.
当你是一个崭露头角的开发者时,也许你希望有一些。 :)
:)
Ken 肯
The problem resides in your setElemMarg()
function: 问题出在你的
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);
}
The literal object syntax you're using in your call to css()
results in jQuery trying to update a propName
style property instead of the property whose name is stored in propName
. 您在调用
css()
使用的文字对象语法会导致jQuery尝试更新propName
样式属性而不是名称存储在propName
中的属性。
You can use bracket notation to work around this issue: 您可以使用括号表示法来解决此问题:
var styleProps = {};
styleProps[propName] = margH;
$(elemTrgt).css(styleProps);
Or simply call the two arguments form of css() : 或者简单地调用css()的两个参数形式:
$(elemTrgt).css(propName, margH);
Why not try to use $(element).attr('style','css_values');
为什么不尝试使用
$(element).attr('style','css_values');
? ?
Since setElemMarg is called within initDOM in the window.load event, then jquery/dom is not guaranteed to be ready. 由于setElemMarg在window.load事件中的initDOM中被调用,因此不保证jquery / dom准备就绪。 You need to call this function in the document load event
您需要在文档加载事件中调用此函数
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.