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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 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 arsort 数组降序排序详细介绍
2016/11/17 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
js 深拷贝函数
2008/12/04 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
详解package.json版本号规则
2019/08/01 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
Python中的filter()函数的用法
2015/04/27 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
Python面试题集
2012/03/08 面试题
监理资料员岗位职责
2014/01/03 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
员工薪酬激励方案
2014/06/13 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
无保留意见审计报告
2015/06/05 职场文书
python三子棋游戏
2022/05/04 Python