Frameset colsProperty
Frameset Object
Definition and Usage
The cols property sets or returns the number and size of columns in a frameset.
A comma-separated list of pixels or percentages defines the number and width of columns.
Syntax
framesetObject.cols=values
The cols property can be one or more of the following values:
| Value | Description |
|---|---|
| pixels | Specifies the size of the column in pixels (e.g., "100px" or "100") |
| % | Specifies the size of the column as a percentage (e.g., "50%") |
| * | The remaining available column space |
Browser Support
All major browsers support the cols property.
Example
In our example, we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:
<html>
<frameset id="main" cols="50%,50%">
<frame src="frame_cols.htm.html">
<frame src="frame_a.htm.html">
</frameset>
</html>
<frameset id="main" cols="50%,50%">
<frame src="frame_cols.htm.html">
<frame src="frame_a.htm.html">
</frameset>
</html>
"frame_cols.htm" source code is as follows:
Example
<html>
<head>
<script>
function changeCols()
{
parent.document.getElementById("main").cols="30%,70%"
}
function restoreCols()
{
parent.document.getElementById("main").cols="50%,50%"
}
</script>
</head>
<body>
<input type="button" onclick="changeCols()" value="Change column size">
<input type="button" onclick="restoreCols()" value="Restore column size">
</body>
</html>
<head>
<script>
function changeCols()
{
parent.document.getElementById("main").cols="30%,70%"
}
function restoreCols()
{
parent.document.getElementById("main").cols="50%,50%"
}
</script>
</head>
<body>
<input type="button" onclick="changeCols()" value="Change column size">
<input type="button" onclick="restoreCols()" value="Restore column size">
</body>
</html>
Try it yourself »
Frameset Object Other Extensions