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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
AngularJS手动表单验证
Feb 01 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 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
虫族 ZERG 概述
2020/03/14 星际争霸
第1次亲密接触PHP5(1)
2006/10/09 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
如何使用php实现评委评分器
2015/07/31 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
Python实现去除代码前行号的方法
2015/03/10 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python绘制多个曲线的折线图
2020/03/23 Python
基于python的列表list和集合set操作
2019/11/24 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
C语言编程练习
2012/04/02 面试题
.NET面试10题
2014/02/24 面试题
护理实习自我鉴定
2013/12/14 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
四风自我剖析材料
2014/09/30 职场文书
2014年检验科工作总结
2014/11/22 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
法定授权委托证明书
2015/06/18 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers