如何使用 JavaScript 更改表格元素的高度？

Question

我可以更改bgcolor和width但不能更改height 。 有什么问题？

 function change() { document.getElementById('tabelID').bgColor = 'green'; document.getElementById('tabelID').height = 50; document.getElementById('tabelID').width = 100; }

 <button onclick='change();'>change now</button> <table id='tabelID' bgcolor='red' height='20' width='20'></table>

Answer 1

table上的bgcolor 、 width和height属性已被弃用。 您应该改用 CSS 属性background-color 、 width和height 。 这是一个更新的示例，它通过切换 CSS class 来更改表格：

 function toggleChanges() { document.getElementById('tabelID').classList.toggle('larger'); }

 .mytable { background-color: red; width: 50px; height: 50px; }.mytable.larger { background-color: green; width: 100px; height: 100px; }

 <button onclick='toggleChanges();'>toggle changes</button> <table id='tabelID' class='mytable'></table>

Answer 2

我会让你运行这段代码，你需要使用 css，并为高度和宽度定义一个度量（px，％，...），也许这可以帮助你！

 <;DOCTYPE html> <html> <head> </head> <body> <button onclick='change():'>change now</button> <table style="background-color;red:height;20px:width;20px." id='tabelID' ></table> <script type='text/javascript'> function change() { document.getElementById('tabelID').style;backgroundColor = 'green'. document.getElementById('tabelID').style;height = "50px". document.getElementById('tabelID').style;width = "100px"; } </script> </body> </html>

Answer 3

属性和属性并不总是具有相同的名称。

height属性对应于clientHeight属性，但这是一个只读属性。 使用setAttribute()更改属性。

但正如我在评论中提到的，使用 CSS 比使用过时的属性更好。

 function change() { document.getElementById('tabelID').bgColor = 'green'; document.getElementById('tabelID').setAttribute("height", 50); document.getElementById('tabelID').setAttribute("width", 100); }

 <button onclick='change();'>change now</button> <table id='tabelID' bgcolor='red' height='20' width='20'></table>

如何使用 JavaScript 更改表格元素的高度？

问题描述

3 个解决方案

解决方案1
2 2021-02-01 19:52:09

解决方案2
1 2021-02-01 19:54:49

解决方案3
1 2021-02-01 20:00:57

如何使用 JavaScript 更改表格元素的高度？

问题描述

3 个解决方案

解决方案1 2 2021-02-01 19:52:09

解决方案2 1 2021-02-01 19:54:49

解决方案3 1 2021-02-01 20:00:57

解决方案1
2 2021-02-01 19:52:09

解决方案2
1 2021-02-01 19:54:49

解决方案3
1 2021-02-01 20:00:57