如何使用 JavaScript 更改表格元素的高度？
[英]How can I change height of a Table element with JavaScript?
问题描述
I can change bgcolor and width but not height .
我可以更改bgcolor和width但不能更改height 。 What's the problem?有什么问题？
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>
3 个解决方案
解决方案1
2 2021-02-01 19:52:09
The bgcolor , width , and height attributes on table have been deprecated. table上的bgcolor 、 width和height属性已被弃用。 You should use the CSS properties background-color , width , and height instead.您应该改用 CSS 属性background-color 、 width和height 。 Here's an updated example that changes the table by toggling a CSS class:这是一个更新的示例，它通过切换 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>
解决方案2
1 2021-02-01 19:54:49
I will let you this code running, you need to use css, and for height and width define a metric (px, %, ...), maybe that could help you!我会让你运行这段代码，你需要使用 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>
解决方案3
1 2021-02-01 20:00:57
Properties and attributes don't always have the same names.属性和属性并不总是具有相同的名称。
The height attribute corresponds to the clientHeight property, but this is a read-only property. height属性对应于clientHeight属性，但这是一个只读属性。 Use setAttribute() to change the attribute.使用setAttribute()更改属性。
But as I mentioned in a comment, it would be better to use CSS than the obsolete attributes.但正如我在评论中提到的，使用 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.