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 相关文章推荐
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 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 无限级 SelectTree 类
2009/05/19 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
Python中int()函数的用法浅析
2017/10/17 Python
Python探索之pLSA实现代码
2017/10/25 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python 类的特殊成员解析
2018/06/20 Python
Windows下python3.6.4安装教程
2018/07/31 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
大学生如何写自荐信
2014/01/08 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
导游词之井冈山
2019/11/20 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
python多线程方法详解
2022/01/18 Python