首页js 动态更改td class属性实例

js 动态更改td class属性实例

时间: 2023-08-12 10:30:52 浏览: 54

好的，下面是一个简单的实例，演示如何使用 JavaScript 动态更改 td 元素的 class 属性： ```html <!DOCTYPE html> <html> <head> <title>动态更改 td class 属性</title> <style type="text/css"> .green { background-color: green; } .red { background-color: red; } </style> </head> <body> <table> <tr> <td id="td1" class="green">TD 1</td> <td id="td2" class="red">TD 2</td> <td id="td3" class="green">TD 3</td> </tr> </table> <script type="text/javascript"> // 获取 td 元素 var td2 = document.getElementById('td2'); // 更改 td 元素的 class 属性 td2.className = 'green'; </script> </body> </html> ``` 在这个实例中，我们首先定义了两个 class 样式，用于设置 td 元素的背景颜色。然后在表格中创建了三个 td 元素，其中 td2 元素的 class 属性被设置为 "red"。最后，使用 JavaScript 获取到 td2 元素，并将其 class 属性更改为 "green"。运行这个示例，你会发现 td2 元素的背景颜色从红色变为了绿色，证明了我们成功地使用 JavaScript 动态更改了 td 元素的 class 属性。