Javascript设置特殊属性

时间:2022-11-02 17:04:16


1、设置和获取特殊属性

setAttribute("score",10);设定一些DOM元素属性名特殊的属性

getAttribute("score");获取设置属性的值


2、示例


示例:五角星评分系统


静态分数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <style type="text/css">
        table{
            width:300px;
            height:30px;
            text-align: center;
            border-collapse: collapse;
            cursor: pointer;
        }
        table td{
            border:solid 1px blue;
        }
    </style>
    <script type="text/javascript">
        onload = function(){
            var tdObjs = document.getElementById('tb').getElementsByTagName("td");
            for(var i=0;i<tdObjs.length;i++)
            {
                tdObjs[i].onmouseover = function(){
                    var score = parseInt(this.getAttribute("score"));//转换为整数
                    for(var j=0;j<tdObjs.length;j++)
                    {
                        if(parseInt(tdObjs[j].getAttribute("score"))<=score)//如果不转换为整数,数量超过10个时,这里就会出问题
                        {
                            tdObjs[j].textContent = "★";
                            tdObjs[j].style.color = "red";
                        }
                    }
                };
                tdObjs[i].onmouseout = function(){
                    for(var j=0;j<tdObjs.length;j++)
                    {
                        tdObjs[j].textContent = "☆";
                        tdObjs[j].style.color = "";
                    }
                };
                tdObjs[i].onclick=function(){
                    var score = this.getAttribute("score");
                    alert("当前分数为:"+score+"分");
                };
            }
        };
    </script>
</head>
<body>
    <table id="tb">
        <tr>
            <td score="10">☆</td>
            <td score="20">☆</td>
            <td score="30">☆</td>
            <td score="40">☆</td>
            <td score="50">☆</td>
        </tr>
    </table>
</body>
</html>

效果图

Javascript设置特殊属性


动态分数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    <title>Javascript测试</title>    <style type="text/css">        table{            width:300px;            height:30px;            text-align: center;            border-collapse: collapse;            cursor: pointer;        }        table td{            border:solid 1px blue;        }    </style>    <script type="text/javascript">        onload = function(){            var tdObjs = document.getElementById('tb').getElementsByTagName("td");            for(var i=0;i<tdObjs.length;i++)            {                tdObjs[i].setAttribute("score",(i+1)*10);            }            for(var i=0;i<tdObjs.length;i++)            {                tdObjs[i].onmouseover = function(){                    var score = parseInt(this.getAttribute("score"));//转换为整数                    for(var j=0;j<tdObjs.length;j++)                    {                        if(parseInt(tdObjs[j].getAttribute("score"))<=score)//如果不转换为整数,数量超过10个时,这里就会出问题                        {                            tdObjs[j].textContent = "★";                            tdObjs[j].style.color = "red";                        }                    }                };                tdObjs[i].onmouseout = function(){                    for(var j=0;j<tdObjs.length;j++)                    {                        tdObjs[j].textContent = "☆";                        tdObjs[j].style.color = "";                    }                };                tdObjs[i].onclick=function(){                    var score = this.getAttribute("score");                    alert("当前分数为:"+score+"分");                };            }        };    </script></head><body>    <table id="tb">        <tr>            <td>☆</td>            <td>☆</td>            <td>☆</td>            <td>☆</td>            <td>☆</td>            <td>☆</td>            <td>☆</td>            <td>☆</td>            <td>☆</td>            <td>☆</td>        </tr>    </table></body></html>

效果图

Javascript设置特殊属性





相关文章