HTML Style columnSpan属性; 设置或返回元素横跨的栏数

使用columnSpan属性设置或返回元素横跨的栏数。

columnSpan属性对应着CSS文档中的 column-span属性。

columnSpan属性语法及技术细节
语法
设置值Object.style.columnSpan="1/all/initial/inherit"
返回值Object.style.columnSpan
技术细节
默认值1/none
返回值字符,元素的column-span属性
CSS版本css3
属性的值及其说明
说明
1(或者:none) 该当元素横跨一栏,默认值
all 元素横跨所有栏
initial 保持原有属性的值。
inherit 继承母元素的设定。

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

#myD {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox: */

column-count: 3; /* Standard syntax */

}

</style>

</head>

<body>

<p>点击以下按钮,让h2元素的内容横跨所有栏</p>

<button onclick="myFc()">按钮</button>

<div id="myD">

<h2 id="myH2">横跨栏目的标题,横跨栏目的标题,横跨栏目的标题</h2>

css3中,规定了设置段落的各种属性,除了position属性、float属性外,还有可以分栏的column-count属性。使用column-count属性分栏后的各栏宽度和高度相同。

当column-width属性与column-count属性都不为auto时,column-count属性指定的数值为栏目的最大值

</div>

<script>

function myFc() {

document.getElementById("myH2").style.WebkitColumnSpan = "all"; //Chrome, Safari,Opera

document.getElementById("myH2").style.columnSpan = "all";

}

</script>

</body>

</html>

不同浏览器的对应情况

属性
columnSpan 10.0 11 Webkit No 5.0 Webkit 11.0

注:上表中的数字为开始支持该当属性的浏览器版本。

关联内容