用JavaScript设置`-moz-column-width`

Question

这适用于Chrome，但不适用于FireFox。

CSS：

.song {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-rule: 1px outset #ff00ff;
  -moz-column-rule: 1px outset #ff00ff;
  column-rule: 1px outset #ff00ff;
}

JavaScript（最小例子）：

_setColumnWidth = function(column_width) {
    var el, els, w, _i, _len;
    console.log("_setColumnWidth!!!");
    els = document.querySelectorAll(".song");
    w = column_width + "em";
    console.log(w);
    for (_i = 0, _len = els.length; _i < _len; _i++) {
      el = els[_i];
      console.log(el);
      el.style["-webkit-column-width"] = w;
      el.style["-moz-column-width"] = w;
      el.style["column-width"] = w;
    }
  };

window.onload = function() {
  console.log("OK!!!");
  _setColumnWidth(30);
}

标记：

<div class="song">
  <pre>
I been a-havin' some hard travellin', I thought you knowed,
                                      A7
I been a-havin' some hard travellin', way down the road,
D                    D7               G              G7
I been a-havin' some hard travellin', hard ramblin', hard gamblin',
D                   A               D
I been havin' some hard travellin', Lord.
  ...
  </pre>
</div>

看起来-moz-column-width根本没有设置。 Plunk：http://plnkr.co/edit/PA05b5SPGPmmq13Y9PtR?p=preview

您可以看到这适用于Chrome：http://pdh.github.io/meltodies/#/Hard%20Travellin::df42773501228606be03d90d583c2f6c

Answer 1

无论出于何种原因，el.style['-moz-column-width'] = '15em';都无效。相反，尝试：

el.style.MozColumnWidth = '15em';