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 toFixed() 方法
Apr 15 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
element-ui中按需引入的实现
Dec 25 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
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
python 自动提交和抓取网页
2009/07/13 Python
python计算最大优先级队列实例
2013/12/18 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
python中黄金分割法实现方法
2015/05/06 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
django-filter和普通查询的例子
2019/08/12 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python读取Kafka实例
2019/12/23 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
自动化专业个人求职信范文
2013/12/30 职场文书
一体化教学实施方案
2014/05/10 职场文书
信访稳定工作汇报
2014/10/27 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书