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 入门教程 [翻译] 推荐
Aug 17 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 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日期处理函数 整型日期格式
2011/01/12 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
Python三元运算实现方法
2015/01/12 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
python链接Oracle数据库的方法
2015/06/28 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python SQLite3简介
2018/02/22 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
技术总监的工作职责
2013/11/13 职场文书
工程班组长岗位职责
2013/12/30 职场文书
广告语设计及教案
2014/03/21 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
初三毕业感言
2015/07/31 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
python保存图片的四个常用方法
2022/02/28 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle