通过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属性, ...
随机推荐
- memcached 和 redis 安装
memcached 1.搭建好lnmp 2.安装依赖包 yum install -y libevent-devel 3.安装memcached $ cd /usr/local/src $ wget h ...
- postgreSQL PL/SQL编程学习笔记（二）
Control Structures of PL/SQL Control structures are probably the most useful (and important) part of ...
- 编写可维护的Javascript纪要
第一部分: 编程风格 在大型项目开发中,因为项目可读性规范性的需要(就像<编写可维护性的Javascript>一书作者Nicholas Zakas大神所说,他们团队所有成员写出的代码就像是 ...
- php中的静态方法实例理解
<?php header("content-type:text/html;charset=utf-8"); class Human{ static public $name ...
- 在StoryBoard对UICollectionViewCell 进行Autolayout是遇到的Xcode6.01的BUG
使用Sb对UICollectionViewCell 的内容进行Autolayout约束时候,发现了一个Xcode6.01的BUG,就是你对UICollectionCell约束完了之后,在模拟器上现实的 ...
- 数据结构5.4_m元多项式的表示
三元多项式表示如下: P(x,y,z) = x10y3z2 + 2x6y3z2 + 3x5y2z2 + x4y4z + 6x3y4z + 2yz + 15 然后对式子进行变形: P(x,y,z)=(( ...
- 【原创】nginx入门
一.简介 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点( ...
- js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换&#XXX函数代码
最近看不少在线工具里面都有一些编码转换的代码,很多情况下我们都用得到,这里脚本之家小编就跟大家分享一下这些资料 Unicode介绍 Unicode(统一码.万国码.单一码)是一种在计算机上使用的字符编 ...
- codeforces 1072D Minimum path bfs+剪枝 好题
题目传送门 题目大意: 给出一幅n*n的字符,从1,1位置走到n,n,会得到一个字符串,你有k次机会改变某一个字符(变成a),求字典序最小的路径. 题解: (先吐槽一句,cf 标签是dfs题????) ...
- UESTC - 1610 递推方程+矩阵快速幂
感觉像是HDU Keyboard的加强版,先推出3张牌时的所有组合,然后递推出n张牌 看到n=1e18时吓尿了 最后24那里还是推错了.. (5行1列 dp[1][n],dp[2][n],dp[3][ ...