CSS ne prend pas en charge l'arithmétique telle que margin-left: -60px + 50% of the width of the parent div. Mais mon désir de le faire est accablant. Est-ce que quelqu'un connaît une solution utilisant JavaScript ou autre?Comment utiliser l'arithmétique pour définir un attribut de style?
Merci
Mike
Essayez ceci:
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";
}
Il est certainement possible avec JS, mais le code spécifique varie en fonction de ce que vous utilisez (vanille, cadres, etc.). Voici un exemple jQuery:
$('#div').css('width', (-60+($('#div').parent().width()*.5))+'px');
Existe-t-il un moyen d'obtenir par classe plutôt que par ID? Merci encore. – Mike
Oui, 'getElementById' n'était qu'un exemple. 'getElementsByClassName' est implémenté dans certains navigateurs mais pas encore. Donc, vous devriez mieux utiliser un framework comme jQuery. Voir la réponse de thedz. – Gumbo
Cet outil interne ne doit fonctionner que dans Safari 4. Je ne vais pas entrer dans la boucle while. La classe 'innerBox' est une div absolue et son parent est la div relative de la classe 'container'. Voici le code que j'ai modifié (désolé je ne vois pas comment le faire apparaître comme du code dans les commentaires): 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"; } – Mike