<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操作样式（评分）的更多相关文章

  1. JS:操作样式表3：内联和外链样式

    var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...

  2. JS 操作样式 style

    1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌sty ...

  3. JS:操作样式表1：行内样式

    //访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.col ...

  4. js 操作样式

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. JavaScript基础插曲—获取标签，插入元素，操作样式

    Js基础 1:document.write() 这个是动态创建元素内容,利用js.这个可以利用js来创建元素,文本,标签等,document.write()与document.writeln()的区别 ...

  6. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  7. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  8. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  9. js操作css样式，null和undefined的区别？

    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...

随机推荐

  1. Laravel-安装composer

    一.系统环境   Laravel框架有些系统上的要求,因此需要保证自己运行环境.要求的环境有:对于PHP的版本要求比较法高,其他的是扩展,可以在php.ini文件中开启 PHP >= 5.5.9 ...

  2. python 第三次作业

    习题1: **1.初始化一个数据集,包括5-10位同学的成绩数据(数据类型不限),数据格式如下: **学号 姓名 Java C语言 Python 2017XXXX 小白 87 68 92 2017XX ...

  3. Preprefix sum BZOJ 3155 树状数组

    题目描述 前缀和(prefix sum)Si=∑k=1iaiS_i=\sum_{k=1}^i a_iSi​=∑k=1i​ai​. 前前缀和(preprefix sum) 则把SiS_iSi​作为原序列 ...

  4. 【Linux】DNS服务-BIND基础配置

    1.BIND简介 现在使用最为广泛的DNS服务器软件是BIND(Berkeley Internet Name Domain),最早有伯克利大学的一名学生编写,现在最新的版本是9,有ISC(Intern ...

  5. Preferences偏好设置

    Preferences偏好设置-Preferences偏好设置 General(综合设置):在综合设置界面内,对Unity集成开发环境进行一些相关的设置 Auto Refresh:自动更新 Alway ...

  6. jenkins官方文档（中文版）

    https://www.w3cschool.cn/jenkins/

  7. google 浏览器的Debug 调试工具使用

    一个写后台的人 有一天要自己找前台页面的错误 于是乎就得会前台debug 于是乎我不会 就在网上找了一些资料看  不就是几个按钮 嘛 有啥难的  上图片 1.Google 浏览器 F12 就可以看到 ...

  8. Qt 学习之路 2（72）：线程和事件循环

    Qt 学习之路 2(72):线程和事件循环 <理解不清晰,不透彻>  --  有需求的话还需要进行专题学习  豆子  2013年11月24日  Qt 学习之路 2  34条评论 前面一章我 ...

  9. struts2学习笔记（三）—— struts2的常见配置

    一.配置文件的加载顺序 每次从客户端发送请求到服务器都要先经过Struts2的核心过滤器StrutsPrepareAndExecuteFilter,这个过滤器有两个功能:预处理和执行.在预处理中主要就 ...

  10. Bootstrap4 导航栏元素居右

    Bootstrap 4正解: .ml-auto元素居右 .mr-auto元素居左 在某度上查了半小时还是没查出什么名堂,搜出来的方法大多都是Bootstrap3的,实测pull-right或navba ...