HTML DOM Column 개체는 HTML 요소와 연결됩니다. Column 개체는 요소의 속성을 가져오거나 설정하는 데 사용됩니다. 태그는
요소 내에서만 사용됩니다.속성
다음은 열 개체의 속성입니다 -
속성 | 설명 |
---|---|
스팬 | 열의 범위 속성 값을 설정하거나 반환합니다. |
구문
다음은 −
의 구문입니다.열 개체 만들기 -
var a = document.createElement("COL");
예시
열 개체에 대한 예를 살펴보겠습니다. -
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } #Col1{ background-color:pink; } </style> </head> <body> <h3>COL OBJECT</h3> <table> <colgroup> <col id="Col1" span="2"> <col style="background-color:lightgreen"> </colgroup> <tr> <th>Fruit</th> <th>Color</th> <th>Price</th> </tr> <tr> <td>Mango</td> <td>Yellow</td> <td>100Rs</td> </tr> <tr> <td>Guava</td> <td>Green</td> <td>50Rs</td> </tr> </table> <p>Click the below button to get span of the "COL1" col element</p> <button onclick="colObj()">COLUMN</button> <p id="Sample"></p> <script> function colObj() { var x = document.getElementById("Col1").span; document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x; } </script> </body> </html>
출력
이것은 다음과 같은 출력을 생성합니다 -
COLUMN 버튼 클릭 시 -
위의 예에서는 2개의 행과 3개의 열이 있는 테이블을 만들었습니다. 테이블에는 전체적으로 스타일이 적용되었습니다. 테이블 내부에는 두 개의 요소가 있는데 하나는 span이 2이고 다른 하나에는 인라인 스타일이 적용되어 있습니다. 첫 번째 범위는 2이므로 해당 스타일은 정확히 두 열에 적용되고 두 번째 은 나머지 열에 스타일을 적용합니다 -
table, th, td { border: 1px solid blue; } #Col1{ background-color:pink; } <table> <colgroup> <col id="Col1" span="2"> <col style="background-color:lightgreen"> </colgroup> <tr> <th>Fruit</th> <th>Color</th> <th>Price</th> </tr> <tr> <td>Mango</td> <td>Yellow</td> <td>100Rs</td> </tr> <tr> <td>Guava</td> <td>Green</td> <td>50Rs</td> </tr> </table>
그런 다음 사용자가 클릭할 때 colObj() 메서드를 실행할 버튼 COLUMN을 만들었습니다.
<button onclick="colObj()">COLUMN</button>
colObj() 메서드는 문서 객체의 getElementById() 메서드를 사용하여 첫 번째 요소를 가져옵니다. 그런 다음 요소의 span 속성 값을 가져와 변수 x에 할당합니다. 변수 x에 저장된 span 속성 값은 단락의 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 표시됩니다 -
function colObj() { var x = document.getElementById("Col1").span; document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x; }가 있습니다.