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设置样式的更多相关文章

  1. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  2. 通过JavaScript设置样式和jQuey设置样式，还有随机数抛出水果的习题

    一:通过JavaScript的方式设置样式(:拿习题为例): var shuiguo = document.getElementById('fruit');     shuiguo.style.bac ...

  3. JavaScript 获取和修改 内联样式

    JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...

  4. Vue系列： 如何通过组件的属性props设置样式

    比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components ...

  5. 【使用 DOM】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  6. 为应用程序的选项卡及ActionBar设置样式

    示例文件  flex-mobile-dev-tips-tricks-pt2.zip 关于Flex移动开发的提示和技巧有一系列文章,这是其中的第二部分.第一部分集中讲解如何在视图切换及应用程序操作切换之 ...

  7. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

  9. 微信小程序wxss设置样式

    微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...

随机推荐

  1. 《深入理解Java虚拟机》学习笔记(二)

    垃圾回收的前提是判断对象是否存活,对象不再存活时将会被回收,下面是2种判断的方法. 引用计数法: 主流的Java虚拟机并没有使用引用计数法来管理内存,重要的原因就是循环引用的问题难以解决. 可达性分析 ...

  2. BZOJ 3309: DZY Loves Math [莫比乌斯反演 线性筛]

    题意:\(f(n)\)为n的质因子分解中的最大幂指数,求\(\sum_{i=1}^n \sum_{j=1}^m f(gcd(i,j))\) 套路推♂倒 \[ \sum_{D=1}^n \sum_{d| ...

  3. BZOJ 3998: [TJOI2015]弦论 [后缀自动机 DP]

    3998: [TJOI2015]弦论 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 2152  Solved: 716[Submit][Status] ...

  4. verilog实验3：AD转换后串口输出到PC端

    一.实验任务 通过tcl549AD转换芯片将模拟电压信号转换为数字信号,并通过串口显示到电脑上.此AD转换芯片为串行转换芯片,且转换速率要和串口选择的速率匹配.等待串口发送完后,再进行下一次AD转换. ...

  5. ASP.NET Core 发布 centos7 配置守护进程

    ASP.NET Core应用程序发布linux在shell中运行是正常的.可一但shell关闭网站也就关闭了,所以要配置守护进程, 用的是Supervisor,本文主要记录配置的过程和过程遇到的问题 ...

  6. qt的信号与槽函数

    关联: bool connect ( const?QObject?*?sender, const?char?*?signal, const QObject * receiver, const char ...

  7. 静态成员static

    静态成员分为静态数据成员和静态函数成员: 静态数据成员: 1.用关键字static来声明: 2.该类的所有对象维护改成员的同一份拷贝:(就是说所有的对象看到的是同一份数据) 3.必须在类外定义和初始化 ...

  8. phpMyAdmin的使用

    phpMyAdmin的使用 安装MySQL数据库后,用户即可在命令行提示符下进行创建数据库和数据表等各种操作,但这种方法非常麻烦,而且需要有专业的SQL语言知识.PHP官方开发了一个类似于SQL Se ...

  9. 使用 Homebrew 安装 Git

    3.2.3 使用 Homebrew 安装 Git 2011-07-27 08:52 蒋鑫 机械工业出版社 字号:T | T 综合评级: 想读(13)  在读(6)  已读(8)   品书斋鉴(1)   ...

  10. iOS7控制中心会覆盖由下向上的手势

    Expect users to swipe up from the bottom of the screen to reveal Control Center. If iOS determines t ...