Comment faire de la div align=“center” par DOM?

J'ai un code HTML:

<div id="first"></div>

Je souhaite utiliser javascript (document.findElementById) pour modifier le comportement de la div, de sorte que ça va être comme:

<div id="first" align="center"></div>

Comment dois-je faire à ce sujet?

InformationsquelleAutor azv | 2012-02-28
  1. 6
    document.getElementById("first").setAttribute("align", "center");
    InformationsquelleAutor Amir Pashazadeh
  2. 4

    Utilisation élément .setAttributeMDN

    document.getElementById('first').setAttribute('align', 'center');

    Moins archaïque approche est de style la marge:

    document.getElementById('first').style.margin = '0 auto';
    InformationsquelleAutor paislee
  3. 0

    Cela fonctionne si vous avez déjà un attribut d'alignement de l'élément

    document.getElementById("first").attributes['align'] = 'center';

    Si vous n'avez pas déjà ont l'attribut, l'utilisation setAttribute

    document.getElementById('first').setAttribute('align', 'center');
    InformationsquelleAutor Shyju
  5. 0

    Malheureusement pour vous, la align attribut est obsolète et ne doit pas être utilisé.

    Vous pouvez centre de DIVs de largeurs spécifiques en définissant le style margin attributs, comme suit:

    document.getElementById('first').style.marginLeft = 'auto';
document.getElementById('first').style.marginRight = 'auto';

    Si vous êtes fixés sur la modification de la align attribut, vous pouvez le faire comme ceci:

    document.getElementById('first').align = 'center';

    D'autres façons de centre de DIVs (à l'aide de CSS) peut être trouvé ici.

    • Ha, mais pouvez-vous venir avec CSS avec précision émule le comportement de align="center"? La page que vous liez à effleure à peine la surface.
    • Qu'entendez-vous par avec précision en émulant le comportement de align='center'? Réglage de la marge de auto est l'une des manières les plus courantes pour ce faire.
    • Pas de. Essayez cette JSFiddle. Si vous supprimez le align="center", donnant à la div margin:0 auto n'est pas assez pour le faire se comporter comme avant! Ni est text-align:center ou une combinaison des deux.
    • C'est pourquoi dans mon premier post, j'ai dit "DIVs de largeurs spécifiques." Dès que vous donner la div CSS largeur de votre JSFiddle, il fonctionne. C'est bien documentée phénomène (une solution de contournement est ici.) Alors que c'est une honte que cela se produit et c'est bien qu'il n'est pas avec le align='center' technique, nous sommes toujours confrontés avec le fait que l'utilisation de align est obsolète.
    • Hm. Avec une largeur fixe, mon jsfiddle ne fonctionne toujours pas, le même avec et sans l'attribut align. Suis-je surplombant quelque chose? Je devrais peut-être poster une nouvelle question.
    • Oh, je suis désolé, j'ai oublié les détails de votre JSFiddle. Ce que vous voulez nécessite imposer un brin plus CSS. En général, pour les éléments de bloc le margin:0 auto; est le chemin à parcourir, et pour le texte que vous souhaitez utiliser text-align:center;—voir cette JSFiddle. Espérons que ça aide! Comme une note, découvrez la différence entre l'ajout de text-align:center; le style de p (qui émule votre violon), par rapport à l'ajoutant le style de la div.
    • Non, margin:0 auto n'est pas la voie à suivre, car il pourrait interférer avec des choses comme <blockquote> dans le div, qui ont des marges d'eux-mêmes. Je travaille toujours sur une solution définitive.
    • C'est à vous, mais <blockquote> est dépréciée en faveur de CSS marges.
    • QUOI?? Vous ne pouvez pas être sérieux! Où faut-il dire que <blockquote> est obsolète? Hey, tu sais ce qu' <blockquote> moyen, n'est-ce pas?
    • Désolé, je suppose que je n'étais pas clair. L'utilisation de <blockquote> uniquement comme un moyen de mise en retrait est obsolète—voir ici. Si vous êtes en utilisant pour qu'un véritable bloc de devis, vous êtes beaux. En général, avec l'ensemble de la rétro-compatibilité des navigateurs, vous êtes toujours à peu près assuré que obsolètes éléments fonctionnent parfaitement. 😉
    • Excuses acceptées. Mais je n'ai jamais laissé entendre que je n'ai jamais utiliser n'importe quel élément d'une manière qu'ils n'étaient pas destinés à être utilisés, - je n'ose pas, et il n'est pas nécessaire - donc votre remarque est venu comme un peu une surprise.

    InformationsquelleAutor JacobEvelyn