使用 JavaScript 设置元素跨越的列数。

在本教程中，我们将学习如何使用 JavaScript 设置元素跨越的列数。

将长段落或文章分成多列可以提高其可读性。'column-count' CSS 属性将文本分成多列。如果希望列在 JavaScript 中跨越，请将 columnSpan 属性设置为 all。

要使用 JavaScript 设置元素跨越的列数，有多种方法，在本教程中，我们将讨论其中两种：

  • 设置 columnSpan 属性
  • 使用 style.setProperty 方法

设置 columnSpan 属性

在 JavaScript 中，元素的 columnSpan 属性指定元素应跨越多少列。元素对象的 style 对象包含此属性。因此，首先，我们需要使用 document.getElementById() 方法访问元素对象以设置此属性，然后使用 columnSpan 属性指定元素应跨越多少列。

语法

// setting the columnSpan property
document.getElementById('id').style.columnSpan = 'none | all | inherit | initial'

在上述语法中，我们使用 document.getElementById() 方法设置 columnSpan 属性，该方法返回 id 为 'id' 的元素的元素对象。

参数

  • none - 元素将跨越一列。这是默认值。

  • all - 元素将跨越所有列。

  • inherit - 此属性继承自其父元素的属性。

  • initial - 此属性设置为默认值。

示例

在下面的示例中，我们使用了 columnSpan 属性来使用 JavaScript 设置元素跨越的列数。我们使用了一个与点击事件关联的按钮“设置 columnSpan”，以执行“setColumnSpan()”函数。此函数使用 document.getElementById() 方法访问元素对象，然后将 columnSpan 属性设置为“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>

使用 setProperty() 方法

在 JavaScript 中，setProperty() 方法设置元素的新属性或现有属性。元素对象的 style 对象包含此方法。例如，必须使用 document 访问元素对象以指定元素应跨越多少列。getElementById() 方法，然后我们可以使用此方法。此方法采用两个参数。setProperty() 方法的属性名称参数应为“column-span”，值和优先级将根据用户的需求而定。

语法

document.getElementById('id').style.setProperty(property_name, value, priority)

在上述语法中，我们使用 document.getElementById() 方法使用 setProperty() 方法。

参数

  • property_name - 要设置的属性的名称。

  • value - 属性的新值。

  • priority - 属性值的优先级（可选）。

示例

在下面的示例中，我们使用了 setProperty 方法来使用 JavaScript 设置元素跨越的列数。我们使用了一个输入字段来获取用户的列跨度值输入。按钮“设置列跨度”与点击事件相关联，该事件执行“setColumnSpan()”函数，该函数根据输入字段的值设置元素应跨越多少列。

<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>

在本教程中，我们学习了如何使用 JavaScript 设置元素跨越的列数。我们使用了 columnSpan 属性和 setProperty 方法来指定元素应跨越多少列。此外，我们还看到了两个示例：通过按钮点击设置列跨度以及使用用户输入字段值设置列跨度。当然，用户可以根据自己的需求使用任何一种方法。

更新于： 2022年10月31日

270 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告