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

Question

我正在尝试向我的网站添加一个按钮来更改显示的列数，因为它是一本字典，更多的列会更有效地利用空间，但可能更难以导航。我只是使用直接的 HTML、PHP、CSS 和一点点 javascript，但是当我单击按钮时，没有任何反应。我已尝试尽我所能来修复它，但无济于事。这是脚本(带有 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>

我以为这很简单，但是，正如我所说，什么也没有发生。这里出了什么问题？

Answer 1

你的代码几乎是正确的，唯一错误的是设置样式属性。有两种方法可以为对象设置属性:

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

第一种方式属性只能包含字母数字符号和下划线。第二种方式您可以使用(几乎)每个符号。

它现在正在按预期工作:

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>

使用 javascript 设置此类包含破折号的 css 属性的另一种方法:

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