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. jquery实现上传图片本地预览效果

    html: <img id="pic" src="" ><input id="upload" name="fil ...

  2. 节点操作,节点属性的操作及DOM event事件

    ##1. 节点操作 createElement(标签名) 创建一个指定名称的元素 someone.appendChild(new_node) 追加一个子节点(作为最后的子节点) someone.ins ...

  3. ansible playbook实践(二)-基础相关命令

    ansible相关的命令: ansible  用来执行ansible管理命令 ansible-doc 用来获取模块的帮助文档 ansible-playbook 当有众多任务时,可编写成playbook ...

  4. iOS-strong和copy【详细解读】

    strong和copy是常用到的修饰符,那么什么时候用strong,什么时候用copy,先上一段代码再说(以下代码直接在ViewController中写): 先定义两个数组 ///strong @pr ...

  5. NOIP2016提高组初赛（C++语言）试题 个人的胡乱分析 Part 3.

    *已更新 胡乱分析的第三部分,程序填空(所谓的完善程序) 说到初赛,好像本周六就是了.哇好激动.. 填空题都是玄学.也许get到点了就会好做一些.. (标红的是填在空里的答案) T1.交朋友 (小矮个 ...

  6. BZOJ 2467: [中山市选2010]生成树 [组合计数]

    2467: [中山市选2010]生成树 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 638  Solved: 453[Submit][Status][ ...

  7. ubuntu14.04安装、NVIDIA显卡驱动安装及CUDA8.0、Cudnn5.1的环境搭建

    安装环境:hp-Z440工作站.64位Ubuntu14.04(64位Ubuntu16.04).Cuda8.0.Cudnn5.1.Nvidia GeForce GT 705.Tesla K40c 本文可 ...

  8. 在CentOS上部署多节点Citus集群

    1 在所有节点执行以下步骤 Step 01 添加Citus Repostory # Add Citus repository for package manager curl https://inst ...

  9. 整理的linux面试运维题

    如何在非交互模式下把 /home/example/下所有.conf文件中的 192.168.0.2 改成 db01 ?   find /home/example/ -type f -name &quo ...

  10. ubuntu下安装memcached与php扩展测试使用

    1,memcached需要libevent,所以要先安装它 下载地址:http://download.chinaunix.net/download.php?id=45065&ResourceI ...