3

I have an HTML code:

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

I wish to use javascript (document.findElementById) to change the behavior of the div so that it'll be as:

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

How do I go about that?

azv
  • 1,583
  • 4
  • 18
  • 25
  • e.g. http://stackoverflow.com/questions/2942250/cakephp-how-to-limit-number-of-records-from-associated-model – calebds Feb 28 '12 at 19:58

5 Answers5

7
document.getElementById("first").setAttribute("align", "center");
Amir Pashazadeh
  • 7,170
  • 3
  • 39
  • 69
5

Use element.setAttributeMDN

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

A less archaic approach is to style the margin:

document.getElementById('first').style.margin = '0 auto';
calebds
  • 25,670
  • 9
  • 46
  • 74
0

This works if you already have an align attribute for that element

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

If you dont already have the attribute, use setAttribute

document.getElementById('first').setAttribute('align', 'center');
Shyju
  • 214,206
  • 104
  • 411
  • 497
0
document.getElementById('first').align = center

See How to add/update an attribute to an HTML element using JavaScript?

Community
  • 1
  • 1
TimCodes.NET
  • 4,601
  • 1
  • 25
  • 36
0

Unfortunately for you, the align attribute is deprecated and shouldn't be used.

You can center DIVs of specific widths by setting the style margin attributes, like so:

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

If you're set on modifying the align attribute, you can do it like so:

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

Other ways to center DIVs (using CSS) can be found here.

JacobEvelyn
  • 3,901
  • 1
  • 40
  • 51
  • Ha, but can you come up with CSS that accurately emulates the behaviour of `align="center"`? The page you link to barely scratches the surface. – Mr Lister Feb 28 '12 at 19:59
  • What do you mean by accurately emulating the behavior of `align='center'`? Setting the margins to `auto` is one of the standard ways to do this. – JacobEvelyn Feb 28 '12 at 20:28
  • No. Try this [JSFiddle](http://jsfiddle.net/KFMyn/). If you remove the `align="center"`, giving the div `margin:0 auto` is not enough to make it behave as before! Neither is `text-align:center` or a combination of the two. – Mr Lister Feb 28 '12 at 20:51
  • That's why in my original post I said "DIVs of specific widths." As soon as you give the div a CSS width in your JSFiddle, it works. This is a well-documented phenomenon (one workaround is [here](http://www.tightcss.com/centering/center_variable_width.htm).) While it's a shame that this occurs and it's nice that it doesn't with the `align='center'` technique, we're still faced with the fact that using `align` is deprecated. – JacobEvelyn Feb 28 '12 at 21:24
  • Hm. With a fixed width, my jsfiddle still doesn't work the same with and without the align attribute. Am I overlooking something? Maybe I should post a new question. – Mr Lister Feb 29 '12 at 07:35
  • Oh I'm sorry, I overlooked the specifics of your JSFiddle. What you want requires a smidge more CSS. In general, for block elements the `margin:0 auto;` is the way to go, and for text you want to use `text-align:center;`—see this [JSFiddle](http://jsfiddle.net/yPaXu/). Hope that helps! As an extra note, check out the difference between adding `text-align:center;` to the styling for `p` (which emulates your fiddle), versus adding it to the style for the `div`. – JacobEvelyn Feb 29 '12 at 19:10
  • No, `margin:0 auto` is not the way to go, because it would interfere with things like `
    ` in the div, that have margins themselves. I'm still working on a definitive solution.
     – Mr Lister Mar 01 '12 at 07:43
  • It's up to you, but `
    ` is deprecated in favor of CSS margins.
     – JacobEvelyn Mar 01 '12 at 14:13
  • WHAT?? You can't be serious! Where does it say that `
    ` is deprecated? Hey, you do know what `
    ` _means_, don't you?
     – Mr Lister Mar 01 '12 at 15:21
  • Sorry, I guess I wasn't clear. Use of `
    ` purely as a means of indenting is deprecated—see [here](http://www.w3.org/TR/html401/struct/text.html#edef-BLOCKQUOTE). If you're using it for actual block quotes you're fine. In general, with all of the backwards-compatibility of browsers, you're still pretty much assured that deprecated elements will work just fine. ;)
     – JacobEvelyn Mar 05 '12 at 18:45
  • Apology accepted. But I never hinted that I ever use any element in ways they weren't meant to be used - I wouldn't dare, _and_ it's not necessary - so your remark came as a bit of a surprise. – Mr Lister Mar 05 '12 at 18:53