通过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属性, ...
随机推荐
- spring 学习（一）：使用 intellijIDEA 创建 maven 工程进行 Spring ioc 测试
spring学习(一):使用 intellijIDEA 创建 maven 工程进行 Spring ioc 测试 ioc 概念 控制反转(Inversion of Control,缩写为IOC),是面向 ...
- .NET Core 版本不支持的问题
分析一个.NET Core开源项目(Ocelot),打开后发现提示当前版本.NET Core 不支持. 错误信息如下: The current .NET SDK does not support ta ...
- 你必须知道的----C语言笔试面试中经典易错的一些知识点（持续更新）
1. 关于二级指针的解析和引用 1.1 二级指针意义 二级指针存放的是一级指针的地址 Ex: Int a = ; Int *p = &a; Int **q = &p; 1.2 ...
- [jvm]java内存模型
一.java内存模型 Java虚拟机规范中试图定义一种Java内存模型(Java Memory Model,JMM)来屏蔽掉各种硬件和操作系统的内存访问差异,以实现让Java程序在各种平台下都能达到一 ...
- SDUT OJ 数据结构实验之排序三：bucket sort
数据结构实验之排序三:bucket sort Time Limit: 250 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem D ...
- Javascript 连接两个数组
JS合并两个数组的方法 我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合 ...
- C++_类和动态内存分配4-有关返回对象的说明
返回方式: 返回指向对象的引用: 指向对象的const引用: const对象: =============================================== 返回指向const对象 ...
- 链表 206 Reverse Linked List, 92,86, 328, 2, 445
表不支持随机查找,通常是使用next指针进行操作. 206. 反转链表 /** * Definition for singly-linked list. * struct ListNode { * i ...
- CF :K 一个含n条边的带权无向连通图，q次查询，每次查询两点间的最短距离。
题意:给你一个含n条边的带权无向连通图,q次查询,每次查询两点间的最短距离. 思路:LCA+思维. 设a,b两点间的距离为f(a,b) 则f(a,b)=dis[a]+dis[b]-2*dis[lca( ...
- [转] 前后端分离之JWT用户认证
[From] http://www.jianshu.com/p/180a870a308a 在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当 ...