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. 论事件驱动与异步IO

    通常我们写服务器模型,有以下几种模型: 每收到一个请求,创建一个新的进程,来处理该请求 每收到一个请求,创建一个新的线程,来处理该请求 每收到一个请求,放入到一个事件中,让主程序通过非阻塞I/0方式来 ...

  2. ABP 数据迁移

    我主要是在项目部署的时候.当添加一个租户的时候.那么租户是有一个单独的数据库.而我的并没有用多租户单数据库. 因此我的模块里面有一个领域事件 当租户添加时将生前表生成到对应的数据库中.如果那位网友有更 ...

  3. ZOJ 2314 Reactor Cooling [无源汇上下界网络流]

    贴个板子 #include <iostream> #include <cstdio> #include <cstring> #include <algorit ...

  4. Codeforces Round #395 (Div. 2)（未完）

    2.2.2017 9:35~11:35 A - Taymyr is calling you 直接模拟 #include <iostream> #include <cstdio> ...

  5. 计算机基础之Windows10操作系统安装U盘制作

    1.第一步,下载Windows10--ISO镜像(Windows7类似),下载站点: https://msdn.itellyou.cn/(百度搜索msdn即可),个人认为这是最干净的操作系统镜像站点, ...

  6. python爬虫（2）——编写一个爬虫

    一.URL的编码与解码 在python2中包含的urllib和urllib2,都是接受URL请求相关的模块.但是在python3中,却没有urllib2.实际上urllib2的功能在python3中可 ...

  7. css3渐变 transition使用方法

    <style> div{ width:300px; height:300px; background:#89F; margin:100px auto; transition:width 1 ...

  8. C/C++调试分析工具

    一.静态分析工具 cppcheck cppcheck主要用于对C/C++源代码进行分析检查的一个开源工具,可以用来检测未使用的变量.越界访问.内存泄漏等问题. 使用方法 cppcheck --enab ...

  9. Java GC分析记录

    Java GC记录 近来.项目没有特别忙碌的时候,抽空看了下生产环境的项目运行状况,我们的项目一直运行速度不是很快,偶尔会出现卡顿的现象,这点给人的体验感觉也就不那么好了.先抛个测试环境截图(生产环境 ...

  10. Zend Framework在windows下的安装

    1:首先需要下载安装PHP的依赖管理工具Composer 详情去http://docs.phpcomposer.com/了解 下载链接: https://getcomposer.org/downloa ...