Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set how many columns an element should span across with JavaScript.
In this tutorial, we will learn to set how many columns an element should span across with JavaScript.
Dividing long paragraphs or articles into many columns improves their readability. The ‘column-count’ CSS property divides the text into numerous columns. Set the columnSpan property to all if you want the columns to span across in JavaScript.
To set how many columns an element should span across with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them −
- Set the columnSpan property
- Use the style.setProperty method
Set the columnSpan Property
In JavaScript, the columnSpan property of an element specifies how many columns an element should span across. The style object of the element object contains this property. So, first, we need to access the element object using the document.getElementById() method to set this property and then use the columnSpan property to specify how many columns an element should span across.
Syntax
// setting the columnSpan property
document.getElementById('id').style.columnSpan = 'none | all | inherit | initial'
In the above syntax, we set the columnSpan property with the help of the document.getElementById() method that returns the element object of the element with id as ‘id’.
Parameters
none − The element will span across one column. It is the default value.
all − The element will span across all columns.
inherit − This property is inherited by its parent element’s property.
initial − This property is set to default.
Example
In the below example, we have used the columnSpan property to set how many columns an element should span across with JavaScript. We have used a button “Set columnSpan” associated with a click event to execute the “setColumnSpan()” function. This function uses the document.getElementById() method to access the element object, then set the columnSpan property to ‘all’.
<html> <body> <h2>Set how many columns an element should span across with JavaScript using the <i>columnSpan property</i></h2> <button onclick="setColumnSpan()">Set columnSpan</button> <div id="root" style=" column-count: 4; padding: 5px; background-color: rgb(240, 248, 255); " > <h2 id="heading" style="background-color: rgb(181, 219, 255); padding: 5px"> Heading Of This Text </h2> Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. </div> <script> // 'Set columnSpan' button click event handler funtion function setColumnSpan() { const heading = document.getElementById('heading') // setting the columnSpan property heading.style.columnSpan = 'all' } </script> </body> </html>
Use the setProperty() Method
In JavaScript, the setProperty() method sets an element’s new or existing property. The element object’s style object contains this method. For example, the element object must be accessed using the document to specify how many columns an element should span across.getElementById() method, and then we can use this method. This method takes two parameters. The property name parameter of the setProperty() method should be ‘column-span,’ and the value and priority will be as per the user’s requirement.
Syntax
document.getElementById('id').style.setProperty(property_name, value, priority)
In the above syntax, we use the setProperty() method with the help of the document.getElementById() method.
Parameters
property_name − The name of the property to be set.
value − The new value of the property.
priority − The priority of the property value (optional).
Example
In the below example, we have used the setProperty method to set how many columns an element should span across with JavaScript. We have used an input field to take the user’s input for the column-span value. A button “Set Column Span” is associated with a click event that executes the “setColumnSpan()” function, which sets how many columns an element should span across as per the input field’s value.
<html> <body> <h2>Set how many columns an element should span across with JavaScript using the <i>setProperty method</i></h2> <h4>Enter the column-span value:</h4> <input type="text" name="column-span" id="column-span" value = "all"/> <button onclick="setColumnSpan()">Set Column Span</button> <div id="root" style=" column-count: 4; background-color: rgb(240, 248, 255); border: 1px solid gray; margin: 5px 0px; " > <h2 id="heading" style="background-color: rgb(181, 219, 255); padding: 5px" > Heading Of This Text </h2> Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. </div> <script> // 'Set columnSpan' button click event handler funtion function setColumnSpan() { const heading = document.getElementById('heading') // user input value for the column-span const column_span = document.getElementById('column-span').value heading.style.setProperty('column-span', column_span) } </script> </body> </html>
In this tutorial, we learned to set how many columns an element should span across with JavaScript. We have used the columnSpan property and the setProperty method to specify how many columns an element should span. In addition, we have seen two examples: setting the column span by a button click and with the user input field value. Of course, the users can use any of these approaches as per their requirements.
216 Views
