JavaScript动态修改HTML表格边框宽度

作者:页面旅途时间:2026-10-30 00:34:43浏览:346

本文介绍如何使用JavaScript动态修改HTML表格的边框宽度。通过获取表格元素对象,直接修改其border属性即可实现。示例包含完整的HTML结构和JS函数,点击按钮即可触发边框变化,适合初学者参考。

JavaScript动态修改表格边框宽度

本文介绍利用JavaScript动态调整表格边框宽度的实现方式,供开发者参考。

核心逻辑是通过JavaScript操作表格元素的border属性来设定边框宽度。


<!DOCTYPE html>
<html>
<head>
<script>
function changeBorder()
{
document.getElementById('myTable').border="10";
}
</script>
</head>
<body>
<table border="1" id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br>
<input type="button" onclick="changeBorder()"
value="Change Border">
</body>
</html>

希望该示例能对JavaScript编程实践提供有益帮助。

作者最新文章