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公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
深入理解node.js之path模块
May 03 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
基于JS判断对象是否是数组
Jan 10 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 进度条实现代码
2009/03/10 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
python 调用Google翻译接口的方法
2020/12/09 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
超市业务员岗位职责
2013/12/05 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
新员工试用期自我评价
2015/03/10 职场文书
指导老师鉴定意见
2015/06/05 职场文书
预备党员入党感言
2015/08/01 职场文书
禁毒主题班会教案
2015/08/14 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android