Как я могу использовать арифметику для установки атрибута стиля?

Question

CSS не поддерживает арифметику, такую ​​как margin-left: -60px + 50% of the width of the parent div. Но мое желание сделать это является подавляющим. Кто-нибудь знает решение с использованием JavaScript или иным образом?

СпасибоMike

Answer 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";
}

Answer 2

Это, конечно, возможно с JS, но конкретный код будет отличаться в зависимости от того, что вы используете (vanilla, frameworks и т. Д.). Вот пример jQuery:

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