JavaScript通过元素的ID和name设置样式


Posted in Javascript onJuly 08, 2014

1、说明

(1)根据所提供的元素的id值,返回对该元素的引用或节点

document.getElementById("tr_th")

(2)根据参数中的标记,返回对一组元素的引用或节点

document.getElementsByTagName("td")

2、实现源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JavaScript通过ID和name设置样式</title> 
<style type="text/css"> 
#tr_th,tr td{ 
border: 1px #CCCCCC solid; 
} 
</style> 
<script type="text/javascript"> 
/** 
* JavaScript通过ID和name设置样式 
*/ 
function setFontColor() 
{ 
//获取table中的表头ID 
var tabId = document.getElementById("tr_th"); 
//设置表头文字颜色 
tabId.style.color = "yellow"; 
//获取table中的td 
var tabName = document.getElementsByTagName("td"); 
//计算出td的个数 
var len = tabName.length; 
//遍历table中的td,并设置td中的内容颜色 
for(var i=0;i<len;i++) 
{ 
tabName[i].style.color = "blue"; 
} 
} 

</script> 
</head> 

<body> 
<table cellpadding="1" cellspacing="0" style="border:1px #CCCCCC solid; width:50%; text-align:center;"> 
<tr id="tr_th"> 
<th>工号</th> 
<th>姓名</th> 
<th>年龄</th> 
<th>性别</th> 
</tr> 
<tr> 
<td>2012010101</td> 
<td>张三三</td> 
<td>23</td> 
<td>男</td> 
</tr> 
<tr> 
<td>2012010102</td> 
<td>柳丝丝</td> 
<td>20</td> 
<td>女</td> 
</tr> 
</table> 
<input type="button" value="设置颜色" onclick="setFontColor()"/> 
</body> 
</html>

3、实现结果

(1)初始化时
JavaScript通过元素的ID和name设置样式
(2)单击“设置颜色”按钮
JavaScript通过元素的ID和name设置样式

Javascript 相关文章推荐
使用jquery实现简单的ajax
Jul 08 Javascript
jquery默认校验规则整理
Mar 24 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
jquery中each方法示例和常用选择器
Jul 08 #Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 #Javascript
bootstrap data与jquery .data
Jul 07 #Javascript
函数式 JavaScript(一)简介
Jul 07 #Javascript
5款JavaScript代码压缩工具推荐
Jul 07 #Javascript
jquery easyui使用心得
Jul 07 #Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
Javascript 继承实现例子
2009/08/12 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python API自动化框架总结
2019/11/12 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
应届生.NET方向面试题
2015/05/23 面试题
建筑工程管理专业自荐信范文
2013/12/28 职场文书
小学大队长竞选稿
2015/11/20 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书