通过js操作样式（评分）

Posted 2020-09-23 傻狍子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过js操作样式（评分）相关的知识，希望对你有一定的参考价值。

<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操作样式（评分）的主要内容，如果未能解决你的问题，请参考以下文章

通过JS实现分数对应的星星评分体现

js控制台 console 骚操作-打印图片-自定义样式-字符画