javascript / 修改 style 中属性值的方法_let styleid = { }, 自定义对象属性-CSDN博客

本文链接：https://blog.csdn.net/itworld123/article/details/108994986

本文介绍了一种使用JavaScript进行事件处理的方法，并演示了如何利用DOM API改变HTML元素的样式。具体介绍了`window.onload`、`document.all`及`addEventListener`等API的应用，通过实例展示了当鼠标悬停在表格行上时，如何改变其背景颜色和字体大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="description" content=event.html"">
        <meta name="keywords" content="event,html,js">
        <title>javascript的程序开发之事件处理</title>
        <script type="text/javascript" src="event2.js"></script>
    </head>
    <body>
        <div id="infoTab">
            <table border="1" cellPadding="5" cellspacing="0" background-color="F2F2F2" width="50%">
            <tr id="infoTr">
                <td>姓名</td>
                <td>年龄</td>
                <td>学历</td>
            </tr>
            <tr id="infoTr">
                <td>张三</td>
                <td>20</td>
                <td>小学</td>
            </tr>
            <tr id="infoTr">
                <td>李四</td>
                <td>21</td>
                <td>初中</td>
            </tr>
            <tr id="infoTr">
                <td>王五</td>
                <td>22</td>
                <td>高中</td>
            </tr>
            <tr id="infoTr">
                <td>赵六</td>
                <td>23</td>
                <td>大学</td>
            </tr>
        </table>
        </div>
    </body>
</html>

function changeColor(obj, color) {
    if (obj != undefined) {
        obj.style.backgroundColor = color;
    };
}

function changefont(obj, size) {
    if (obj != undefined) {
        obj.style.fontSize = size;
    }
}
window.onload = function () {  //动态的绑定事件
    //取出tr元素对象数组 
    var trObj = document.all('infoTr');
    //给所有的tr绑定事件,通过id取出的是一个对象数组
    for (var i = 0; i < trObj.length; i++) {
        //绑定鼠标进入事件
        trObj[i].addEventListener('mouseover', function () {
            changeColor(this, 'red');
            changefont(this, "25px");
        }, false);

        //绑定鼠标离开事件
        trObj[i].addEventListener('mouseout', function () {
            changeColor(this, '#F2F2F2');
            changefont(this, "15px");
        }, false);
    };
}

上述代码中，changefont 和 changeColor 就是根据 js 对象修改属性的代码。