Question

有没有办法知道CSS多列布局的实际列宽和列间距？ Column-width属性指示最佳列宽。实际的列宽可能与指定的值有所不同：在需要填充可用空间时可能会变宽，而在可用空间太小时会变窄。

div {
  column-width: 200px;
  column-gap: 20px;
  width: 300px;
  border: 1px solid green;
}

<div>
  Atlantic trout snake mudhead ribbon eel, "ribbonfish pilot fish," sole dusky grouper. Fierasfer tiger shark central mudminnow viperfish, spotted danio sabertooth bat ray deepwater flathead thornyhead roosterfish, "pompano molly longfin escolar." Goldeye
  sandperch springfish, spiny dogfish chum salmon dogfish shark tiger barb escolar, "handfish Sundaland noodlefish," Rattail, knifefish Red salmon. Freshwater shark Blacksmelt eagle ray, bonytongue goldfish northern pike anemonefish molly loweye catfish
  stingray crocodile shark northern lampfish beluga sturgeon. Black mackerel denticle herring rough sculpin, perch, round herring Atlantic trout frilled shark mudsucker swordfish mahi-mahi. Shovelnose sturgeon sergeant major sheepshead catalufa pink salmon
  Jack Dempsey panga eel--sand stargazer ridgehead mosquitofish, "stonefish Antarctic icefish barreleye surfperch," mudskipper North American darter! Sábalo: scaleless black dragonfish Bitterling silver hake, spiny-back freshwater shark? Long-finned char
  kahawai, alligatorfish Modoc sucker scaleless black dragonfish New World rivuline. Grunion; daggertooth pike conger flat loach. Bonito, "yellow moray lionfish," sardine hammerhead shark.
</div>

https://jsfiddle.net/Maria1983/4Lokqxg2/12/

在此示例中，实际列宽大于CSS列宽值。

Answer 1

也许这就是您想要的：
https://developer.mozilla.org/fr/docs/Web/API/Window/getComputedStyle

  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();

这是一个jsfiddle。

https://jsfiddle.net/sy9c8253/

有没有办法获得实际的CSS列的宽度和间隙？

1 个答案: