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';

第一种方式property只能包含字母数字符号和下划线。第二种方式你可以使用（几乎）每个符号。

现在按预期正在运作：

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"

Answer 2

首先你必须有文件准备好设置事件，然后我认为你的CSS不是那么正确。你可以使用这个链接。有关于html，css和javascript的文档和示例。 http://www.w3docs.com/learn-javascript/javascript-events.html

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

2 个答案: