<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. Mysql初识数据库《二》数据库管理软件的由来

    数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件都运 ...

  2. EF进阶篇（二）——CRUD

    前言 不写前言了... 内容 我们都知道我们修改的实体状态添加到上下文里面,然后上下文根据实体状态生成相应的SQL执行脚本,去隐式执行到数据库中.(屏幕前的你暂且这样理解吧,因为小编语文没有学好,太通 ...

  3. 设置使用的python版本

    一.查看当前使用的python版本,或设置使用的python版本 二.python2中默认使用ASCII码,无法识别中文,报错如图,解决办法,设置字符集为utf-8

  4. 【转】c# delegate

    源地址:https://www.cnblogs.com/lcawen/p/6645358.html

  5. DRF的认证、权限 和 限制

    一.概述 认证是将传入请求与一组标识凭据(例如请求来自的用户或其签名的令牌)相关联的机制.然后 权限 和 限制 组件决定是否拒绝这个请求. 简单来说就是: 认证确定了你是谁 权限确定你能不能访问某个接 ...

  6. linux上的那些查找的命令

    由于工作的需要,少不得要在linux系统上查找各种各样的文件,关于在linux查找的命令有不少,这里小小的总结下. 简单介绍下各个命令的用途: find:实际搜索硬盘查询文件名称: whereis:查 ...

  7. ubuntu 16.04 安装googlepinyin中文输入法

    安装谷歌拼音输入法 打开终端输入: apt-get install fcitx-googlepinyin 安装完成之后,进入系统设置 安装语言包 修改输入法系统 点击“System Setting”- ...

  8. Qt 学习之路 2（51）：布尔表达式树模型

    Qt 学习之路 2(51):布尔表达式树模型 豆子 2013年5月15日 Qt 学习之路 2 17条评论 本章将会是自定义模型的最后一部分.原本打算结束这部分内容,不过实在不忍心放弃这个示例.来自于 ...

  9. C++_函数3-引用变量与函数的默认参数

    引用变量 C++新增了一种复合类型——引用变量. 引用是已定义的变量的别名.例如将twain作为clement变量的引用,则可以交替使用twain和clement来表示该变量. 引用变量的主要用途:用 ...

  10. windows使用putty工具 进行【复制】，【粘贴】操作

    #复制# 按住鼠标左键,执行选择,放开左键时完成复制 #粘贴# 点击鼠标右键,执行粘贴