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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
js实现返回顶部效果
Mar 10 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
手机浏览器唤起微信分享(JS)
Oct 11 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
Zend的MVC机制使用分析(一)
2013/05/02 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
禁止js文件缓存的代码
2010/04/09 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python中List.index()方法的使用教程
2015/05/20 Python
python生成验证码图片代码分享
2016/01/28 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Python中函数的返回值示例浅析
2019/08/28 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
数控机械专业个人的自我评价
2014/01/02 职场文书
生日邀请函范文
2014/01/13 职场文书
生物制药自我鉴定
2014/01/25 职场文书
爱国口号
2014/06/19 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
图文详解nginx日志切割的实现
2022/01/18 Servers