JavaScript通过ID和name设置样式
JavaScript通过ID和name设置样式
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）初始化时
（2）单击“设置颜色”按钮
JavaScript通过ID和name设置样式的更多相关文章
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- 通过JavaScript设置样式和jQuey设置样式，还有随机数抛出水果的习题
一:通过JavaScript的方式设置样式(:拿习题为例): var shuiguo = document.getElementById('fruit'); shuiguo.style.bac ...
- JavaScript 获取和修改 内联样式
JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...
- Vue系列： 如何通过组件的属性props设置样式
比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components ...
- 【使用 DOM】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- 为应用程序的选项卡及ActionBar设置样式
示例文件 flex-mobile-dev-tips-tricks-pt2.zip 关于Flex移动开发的提示和技巧有一系列文章,这是其中的第二部分.第一部分集中讲解如何在视图切换及应用程序操作切换之 ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
- 微信小程序wxss设置样式
微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...
随机推荐
- 扩展 KMP
扩展KMP解决这样一些问题: 给定两个字符串 S 和 T(长度分别为 n 和 m),下标从 0 开始,定义extend[i]等于S[i]...S[n-1]与 T 的最长相同前缀的长度,求出所有的ext ...
- BZOJ 1025: [SCOI2009]游戏 [置换群 DP]
传送门 题意:求$n$个数组成的排列变为升序有多少种不同的步数 步数就是循环长度的$lcm$..... 那么就是求$n$划分成一些数几种不同的$lcm$咯 然后我太弱了这种$DP$都想不出来.... ...
- BZOJ 1492: [NOI2007]货币兑换Cash [CDQ分治 斜率优化DP]
传送门 题意:不想写... 扔链接就跑 好吧我回来了 首先发现每次兑换一定是全部兑换,因为你兑换说明有利可图,是为了后面的某一天两种卷的汇率差别明显而兑换 那么一定拿全利啊,一定比多天的组合好 $f[ ...
- CentOS上安装Git服务器
1.安装Git 打开控制台,执行以下命令进行安装 $ yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel ...
- VS2012编译log4cpp1.1.1版本
1.起因 看到官方网站上的log4cpp的代码已经更新到了1.1.1,而我目前使用的1.0.3版本,所以想使用下最新版本.在使用过程中发现相对于老版本,新版本的变化还是比较大的,特写下此文记录下. 2 ...
- Maven项目中的配置文件找不到以及打包问题
我们在使用maven开发项目的时候,创建model的时候会自动创建一个resource目录:这个目录是用来放配置文件的,我们把配置文件放在这个目录中项目打包才会将配置文件打包进去. 有的时候我们会把配 ...
- docker dead but pid file exists
CentOS 6安装docker 报docker dead but pid file exists 执行 yum install epel-release yum install docker-io ...
- 怎样调整XenServer下面Linux虚拟机的磁盘大小
登录到XenServer. 修改虚拟机磁盘大小修改storage 磁盘大小 启动虚拟机 修改分区大小Hex code (type L to list codes): 8eChanged system ...
- PHP 批量获取指定目录下的文件列表(递归，穿透所有子目录)
//调用 $dir = '/Users/xxx/www'; $exceptFolders = array('view','test'); $exceptFiles = array('BaseContr ...
- dnspython模块安装
wget http://www.dnspython.org/kits/1.12.0/dnspython-1.12.0.tar.gz tar -zxvf dnspython-1.12.0.tar.gz ...