通过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属性, ...
随机推荐
- linux下关闭防火墙命令
今天使用linux虚拟机搭建jenkins,但是在虚拟机内部使用浏览器可以访问jenkins主页,在物理机上却无法访问jenkins主页,查找原因后是因为linux虚拟机没有关闭防火墙,关闭防火墙后, ...
- javascript 深拷贝对象
深拷贝polesResult,拷贝后sourceCopy成为与polesResult完全独立的对象 var sourceCopy=[].concat(JSON.parse(JSON.stringify ...
- luoguP3302 [SDOI2013]森林
https://www.luogu.org/problemnew/show/P3302 看到查询第 k 小,而且是一颗树,可以联想到在树上的主席树,a 和 b 路径中第 k 小可以通过在 a, b, ...
- Mysql导入数据时-data truncated for column..
在导入Mysql数据库时,发现怎么也导入不进去数据,报错: 查看表定义结构:可以看到comm 定义类型为double类型 原来是因为数据库文件中: 7369 smith clerk ...
- 深度剖析MQTT协议的整个通信流程
http://www.elecfans.com/d/587483.html MQTT,目前物联网的最主要的协议,基本所有收费的云平台都是基于MQTT协议,比如机智云,和所有的开放云平台比如中国移动的o ...
- SDUT OJ 数据结构实验之排序四：寻找大富翁
数据结构实验之排序四:寻找大富翁 Time Limit: 200 ms Memory Limit: 512 KiB Submit Statistic Discuss Problem Descripti ...
- 【问题记录】element is not attached to the page document
遇到ui脚本报错:element is not attached to the page document 解决办法,再次定位即可
- ThinkCMF Volist标签
volist标签通常用于查询数据集(select方法)的结果输出,通常模型的select方法返回的结果是一个二维数组,可以直接使用volist标签进行输出. 在控制器中首先对模版赋值: $User = ...
- TX2中设备树烧写
将要修改的设备树文件拷贝到下面的目录替换相应的文件 ../64_TX2/Linux_for_Tegra_tx2/kernel/dtb 用micro-USB线连接TX2上的USB OTG口和PC机的US ...
- R语言常用包汇总
转载于:https://blog.csdn.net/sinat_26917383/article/details/50651464?locationNum=2&fps=1 一.一些函数包大汇总 ...