首页 > 代码库 > 通过js操作样式（评分）

通过js操作样式（评分）

2024-10-08 18:55:39   216人阅读

<style>
        td{
            font-size:50px;
            color:yellow;
            cursor:pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //获取所有td
            var tds = document.getElementById(‘tabRate‘).getElementsByTagName(‘td‘);
            //为每个td注册一个onmouseover和onmouseout事件
            for (var i = 0; i < tds.length; i++) {
                //鼠标悬浮事件
                tds[i].onmouseover = function () {
                    //设置从第0个开始到当前鼠标移动到td位置为实心五角星
                    for (var c = 0; c < tds.length; c++) {
                        tds[c].innerHTML = ‘★‘;
                        if (tds[c] == this) {
                            break;
                        }
                    }
                };
                //鼠标离开事件
                tds[i].onmouseout = function () {
                    for (var c = 0; c < tds.length; c++) {
                        tds[c].innerHTML = ‘☆‘;
                        if (tds[c] == this) { break };
                    }
                };
                //为每个td注册单击事件
                tds[i].onclick = function () {

                    for (var c = 0; c < tds.length; c++) {
                        tds[c].removeAttribute(‘isclicked‘);
                    }
                    this.setAttribute(‘isclicked‘, ‘isclicked‘);
                };
            }
        }
    </script>
</head>
<body>
    <table id="tabRate" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
        </tr>
    </table>
</body>

 

通过js操作样式（评分）


联系
我们