Question

您好我想通过点击一个按钮，在平滑过渡的2秒内将HTML表格的高度从690改为400。有没有办法在纯CSS中执行此操作？这是我的例子：

<html>
<head>
<title>Test</title>
</head>
<body>
<table>
<tr>
<td>
<button type="button">Click Me!</button>
</td>
</tr>
<tr>
<td height="690" width="1280> <--- This cell needs it height to change to 400px when the button is clicked.
Cell 1
</td>
</tr>
</table>
</body>
</html>

Answer 1

您无法完全使用CSS执行此操作，但您可以使用jQuery轻松完成此操作：

// Use a more specific selector by ID or class
$('button').click(function (event) {
    $(this).closest('tr').next().children('td:first').animate({height: 400}, 2000);
});

Answer 2

您需要使用Javascript。使用function click() { document.getElementById('id').setProperty('style', 'height:100px;'); }

按钮使用此选项 - <button onclick="click();">BUTTON</button>

Answer 3

给id按钮（clickbut）和table（tableheight）然后使用jquery

$(document).ready(function(){
  $("#clickbut").click(function(){
    $("#tableheight").css('height','somevalue eg:300px');
  });
});

单击链接时如何更改HTML表的高度？

3 个答案: