如何使用算术设置样式属性？答案

【问题标题】：How can I use arithmetic setting a style attribute?如何使用算术设置样式属性？
【发布时间】：2009-07-25 17:29:52
【问题描述】：

CSS 不支持 margin-left: -60px + 50% of the width of the parent div 等算术运算。但我这样做的愿望是压倒性的。有人知道使用 JavaScript 或其他方式的解决方案吗？

谢谢
迈克

【问题讨论】：

【解决方案1】：

试试这个：

var elem = document.getElementById("foobar"),
    parent = elem.parentNode;
while (parent && parent.nodeName != "DIV") {
    parent = parent.parentNode;
}
if (parent.nodeName == "DIV") {
    elem.style.marginLeft = - 60 + (parent.style.width * 0.5) + "px";
} else {
    elem.style.marginLeft = "-60px";
}

【讨论】：

有没有办法通过 Class 而不是 ID 获取？再次感谢。
是的，getElementById 只是一个例子。 getElementsByClassName 已在某些浏览器中实现，但尚未全部实现。所以你应该更好地使用像jQuery这样的框架。请参阅 thedz 的答案。
这个内部工具只需要在 Safari 4 中工作。我没有进入 while 循环。 'innerBox' 类是一个绝对 div，它的父类是 'container' 类相对 div。这是我修改的代码（抱歉，我看不到如何使它在 cmets 中显示为代码）： var elem = document.getElementsByClassName("innerBox"), parent = elem.parentNode; while (parent && parent.nodeName != "DIV") { alert('NotGettingHere!') parent = parent.parentNode; } if (parent.nodeName == "DIV") { elem.style.marginLeft = - 60 + (parent.style.width * 0.5) + "px"; } else { elem.style.marginLeft = "-60px"; }
getElementsByClassName 返回具有该类的元素列表。因此，您必须遍历该列表（简单的for 循环）并将所有内容放入该循环中。所以：var elems = document.getElementsByClassName("innerBox"); for (var i=0; i<elems.length; i++) { var elem = elems[i], parent = elem.parentNode; … }.

【解决方案2】：

使用 JS 当然可以，但具体代码会根据您使用的内容（原版、框架等）而有所不同。这是一个 jQuery 示例：

 $('#div').css('width', (-60+($('#div').parent().width()*.5))+'px');

【讨论】：