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 相关文章推荐
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
ES6 更易于继承的类语法的使用
Feb 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
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP反射基础知识回顾
2020/09/10 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
潜说js对象和数组
2011/05/25 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
javascript判断office版本示例
2014/04/11 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
node.js实现快速截图
2016/08/27 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
vue-router传参用法详解
2019/01/19 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
python list排序的两种方法及实例讲解
2017/03/20 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python如何制作英文字典
2019/06/25 Python
Python 忽略文件名编码的方法
2020/08/01 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
宿舍违规检讨书
2014/01/12 职场文书
签约仪式策划方案
2014/06/02 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
英语教师个人工作总结
2015/02/09 职场文书
质量保证书格式模板
2015/02/27 职场文书
大学生英文求职信范文
2015/03/19 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书