Add style attribute using javascript on load

Question

I'm trying to add a inline-style using JavaScript as soon as the site is loaded (can't use CSS directly due to reasons). I want all text within a table to be horizontally centered,

This is my JavaScript code so far:

window.onload = center_content();
function center_content (){
    var all_td = document.getElementsByTagName('table');
    all_td[0].style.textAlign = "center !important";
}

Edit: Code corrected so far

jsfiddle: http://jsfiddle.net/GinSan/h46mz6na/4/ (remember that I can't directly use CSS in this case)

Any help is much appreciated. No jQuery solutions please.

all_td[0].style.text-align = "center !important"; is interpreted as all_td[0].style.text - align = "center !important";, i.e. it tries to subtract align from all_td[0].style.text. Then you are trying to assign a value to that value, which doesn't make sense to the engine. — Felix Kling
– Felix Kling, Commented Aug 19, 2014 at 23:29

Hashem Qolami · Accepted Answer · 2014-08-19 23:56:05Z

4

Hyphen-separated properties of style object should be used in camelCase when it comes to JavaScript.

Try using so:

document.getElementsByTagName('table')[0].style.textAlign = "center";

You could also use .style["text-align"] to achieve the same result.

However if you want to set the priority (i.e. !important keyword), not only the value, you could use .setProperty() method as follows:

EXAMPLE HERE

document.getElementsByTagName('table')[0].style.setProperty("text-align", "center", "important");

And one more thing, by using () at window.onload = center_content(); you're executing center_content() immediately and assigning the returned value which is undefined to window.onload.

You could either do it like window.onload = center_content; or use an anonymous function:

window.onload = function () { /* ... */ };

edited Aug 19, 2014 at 23:56

answered Aug 19, 2014 at 23:20

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Felix Kling Over a year ago

"Hyphen-separated properties should be used in camelCase when it comes to JavaScript." But note that that only works for the properties of the element.style object. See also developer.mozilla.org/en-US/docs/Web/CSS/…

Hashem Qolami Over a year ago

@FelixKling Of course! I meant the style properties. I just forgot to mention it. Thanks anyway.

MoritzLost Over a year ago

Thanks, firefox doesn't show the error message anymore. However, the text still doesnt appear centered °v° Maybe there's another error somewhere, I added a fiddle

Hashem Qolami Over a year ago

@Gin-San Your fiddle gives me a 404 error. I added mine. Check the update please.

MoritzLost Over a year ago

Sorry, don't know why the link didn't work anymore. Tried your example, but for some reason, it doesn't work, don't know why :/ I added a functional fiddle link, could you take a look at it?

|

rink.attendant.6 · Accepted Answer · 2014-08-19 23:23:09Z

0

You cannot use - in a variable name or property. Instead use style.textAlign

edited Aug 19, 2014 at 23:23

rink.attendant.6

46.7k64 gold badges111 silver badges161 bronze badges

answered Aug 19, 2014 at 23:21

xmarston

8833 gold badges13 silver badges38 bronze badges

1 Comment

Felix Kling Over a year ago

You can use - in a property (name). You just can't use dot notation to access that property.

Collectives™ on Stack Overflow

Add style attribute using javascript on load

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related