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 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
微信小程序异步处理详解
Nov 10 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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和.net中des加解密的实现方法
2013/02/27 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
2015年教研组工作总结
2015/05/04 职场文书
计算机教师工作总结
2015/08/13 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android