JavaScript: How to add 'word-wrap' style to element

Question

How do you add the 'word-wrap' style to an element using JavaScript?

tables = document.getElementsByTagName("TABLE");
for (i = 0; i < tables.length; i++)
    tables[i].style.word-wrap = 'break-word';

The above code produces the following error:

ReferenceError: invalid assignment left-hand side

Although the code works if I used a different style, ie...

tables[i].style.width = '300px';

'word-wrap' seems to be what I'm looking for though, as it works within a test CSS file and within HTML style tags.

Answer 1

Javascript uses camel case for style property declarations

tables[i].style.wordWrap = 'break-word';

wordWrap is a object key, object keys must not include -.

Answer 2

Just use wordWrap instead word-wrap

tables = document.getElementsByTagName("TABLE");
for (i = 0; i < tables.length; i++)
    tables[i].style.wordWrap = 'break-word';

Style names in Javascript use camelCase. - is the arithmetic subtraction operator, it can't used in identifiers.

You could use bracket notation instead but it's not recommended

tables[i].style['word-wrap'] = 'break-word';