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 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
react-router中的属性详解
Jun 01 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
php eval函数一句话木马代码
2015/05/21 PHP
php生成图片验证码
2015/06/09 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
Js动态创建div
2008/09/25 Javascript
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
在python里面运用多继承方法详解
2019/07/01 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
如何用python清洗文件中的数据
2021/06/18 Python