通过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:操作样式表3：内联和外链样式
var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...
- JS 操作样式 style
1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌sty ...
- JS:操作样式表1：行内样式
//访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.col ...
- js 操作样式
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- JavaScript基础插曲—获取标签，插入元素，操作样式
Js基础 1:document.write() 这个是动态创建元素内容,利用js.这个可以利用js来创建元素,文本,标签等,document.write()与document.writeln()的区别 ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- js操作css样式，null和undefined的区别？
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
随机推荐
- count failed: not master{ "note" : "from execCommand", "ok" : 0, "errmsg" : "not master" } at src/mongo/shell/query.js:191在SECONDARY节点无法show dbs
count failed: not master{ "note" : "from execCommand", "ok" : 0, " ...
- Centos7服务器启动jar包项目最佳方式
jar后台运行:nohup java -jar xx.jar >/dev/null & 此处的“>/dev/null”作用是将终端输出信息输出到空洞中,即不保存输出信息,若要查看输 ...
- CBoard 视图中的拖拽实现
CBoard中拖拽的功能其实引用了 github的angular-drag-and-drop-lists控件来实现的. 在html页面中引用 div引用dnd-inserted属性 Cboard 系列 ...
- [PowerShell]HTML parsing -- get information from a website
link: http://stackoverflow.com/questions/9053573/powershell-html-parsing-get-information-from-a-webs ...
- 【算法笔记】B1012 数字分类
1012 数字分类 (20 分) 给定一系列正整数,请按要求对数字进行分类,并输出以下 5 个数字: A1 = 能被 5 整除的数字中所有偶数的和: A2 = 将被 5 除后余 1 的数字 ...
- org.hibernate.QueryException: Unable to resolve path [SecWilldosetdate.name],xxxxxxxx...异常处理
今天在写hql语句的时候出现了这个错误,然后一直运行到执行hql这儿就出错了.页面报500. 原hql如下: String hql = "from SecWilldosetdate wher ...
- 51nod - 1163 巧妙的并查集 O(1)维护区间
有N个任务,每个任务有一个最晚结束时间以及一个对应的奖励.在结束时间之前完成该任务,就可以获得对应的奖励.完成每一个任务所需的时间都是1个单位时间.有时候完成所有任务是不可能的,因为时间上可能会有冲突 ...
- 本地安全策略命令行secedit设置本地账户安全策略
我们日常运行的控制台程序secpol.msc里面的内容,实质可以通过命令行完成,下面演示通过secedit命令来设置本地账号密码策略,启用密码复杂性和强制长度至少8位操作办法. ==> 新建文本 ...
- jquery 方法总结
1. 给列表中 某个 标签添加 点击方法 $(function(){ $(".delete").click(function(){ var href = $(this).att ...
- Scrapy安装指南(windows)
windows开发,难免遇到很多坑,比一般开发是艰苦得多.先不吐槽windows,我们直接看这个scrapy怎么安装. 首先,要有一份文档,比如我用这个: http://scrapy-chs.read ...