Javascript Reference - HTML DOM Style columnSpan Property

The columnSpan property specifies how many columns an element would span across.

Browser Support


`columnSpan`	Yes (WebkitColumnSpan)	10.0	Yes	Yes (WebkitColumnSpan)	Yes

Syntax

Return the columnSpan property:

var v = object.style.columnSpan

Set the columnSpan property:

object.style.columnSpan='1|all|initial|inherit'

Property Values

1: Default value. The element should span across one column.
all: The element should span across all columns
initial: sets to default value
inherit: Inherits this property from its parent element

Technical Details

Default Value:	1
Return Value:	A string representing the column-span property
CSS Version	CSS3

Example

The following code shows how to set column span.


<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {<!--from   www  .j a  va2 s . c  o  m-->
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox: */
    column-count: 3; /* Standard syntax */
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">
<h2 id="myH2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse molestie 
consequat, vel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te feugait 
nulla facilisi. Nam liber tempor cum soluta nobis eleifend 
option congue nihil imperdiet doming id quod mazim placerat 
facer possim assum. Typi non habent claritatem insitam; 
est usus legentis in iis qui facit eorum claritatem. 
Investigationes demonstraverunt lectores legere me lius 
quod ii legunt saepius.
</div>
<script>
function myFunction() {
    document.getElementById("myH2").style.WebkitColumnSpan = "all"; // Code for Chrome, Safari, and Opera
    document.getElementById("myH2").style.columnSpan = "all";
}
</script>

</body>
</html>

The code above is rendered as follows: