无法使用JavaScript在按钮上设置css属性

Question

I'm trying to add a button to my website to change the number of columns displayed, because it's a dictionary and more columns would be more efficient with space, but perhaps more difficult to navigate. I'm just using straight HTML, PHP, CSS, and just this little bit of javascript, but when I click the button, nothing happens. I've tried what I can to fix it, but to no avail. Here's the script (with CSS)

 #col { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } 

 <center><button onclick="thrcol()">Three Columns</button></center> <script type="text/javascript"> function thrcol() { document.getElementById("col").style.-webkit-column-count=3; document.getElementById("col").style.-moz-column-count=3; document.getElementById("col").style.column-count=3; } </script> <div id="col"><!-- A bunch of boring PHP that works -->Hello, World!<br>Hello, World!<br>Hello, World!</div> 

I thought that this would just be simple, but, as I said, nothing happens. What's wrong here?

Answer 1

Your code was almost right, the only wrong thing was setting the style property. There are 2 ways to set a property to an object:

object.property = 'value';
object['property'] = 'value';

The first way property can contain only alphanumeric symbols and underscores. The second way you can use (almost) every symbol.

It is working now as expected:

 function thrcol() { document.getElementById("col").style.webkitColumnCount = 3; document.getElementById("col").style.mozColumnCount = 3; document.getElementById("col").style.columnCount = 3; // or: document.getElementById("col").style['-webkit-column-count'] = 3; document.getElementById("col").style['-moz-column-count'] = 3; document.getElementById("col").style['column-count'] = 3; } 

 button { display: block; } #col { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } 

 <button onclick="thrcol()">Three Columns</button> <div id="col"> Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World! </div> 

Another way to set such dash-containing css properties using javascript:

"margin-left" becomes "marginLeft"
"border-bottom" becomes "borderBottom"
"-webkit-column-count" becomes "webkitColumnCount"

Answer 2

At first you must have document ready for setting event,then I think your css is not so correct.you can use this link.there are documentations and examples about html,css and javascript. http://www.w3docs.com/learn-javascript/javascript-events.html