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. 使用mongoose和bcrypt实现用户密码加密

    前面的话 最近在做的个人项目中,需要对密码进行加密保存,对该操作的详细步骤记录如下 介绍 关于mongoose已经写过博客就不再赘述,下面主要介绍bcrypt bcrypt是一个由两个外国人根据Blo ...

  2. 用js脚本一键下载网页所有图片

    年前这两天稍微闲一点了,琢磨了一点js脚本,功能是把当前网页页面上的所有图片一次性保存到本地,免得每次都要对图片右键保存. 测试环境:Chrome开发者模式下(启动Chrome,按F12即可) 测试网 ...

  3. 定时跳转的两种方式（html + javaweb)

    html方式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  4. coredump故障分析

    如果一个程序运行3天后才会出错,这个时候 难道需要我们一直用GDB调试程序3天吗? 这个时候我们就需要使用到core  dump: 1.Core Dump又叫核心转存.当程序在运行过程中发生异常, 这 ...

  5. xBIM WeXplorer xViewer 浏览器检查

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  6. vue 路由懒加载 使用，优化对比

    vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...

  7. fiddler 抓取 nodejs

      nodejs 代理指向 fiddler   var options = {       ........ }; options.path = 'http://' + options.host + ...

  8. MySQL数据库基础（三）（操作数据表中的记录）

    1.插入记录INSERT 命令:,expr:表达式 注意:如果给主键(自动编号的字段)赋值的话,可以赋值'NULL'或'DEFAULT',主键的值仍会遵守默认的规则:如果省略列名的话,所有的字段必须一 ...

  9. bzoj 3622 已经没有什么好害怕的了 类似容斥，dp

    3622: 已经没有什么好害怕的了 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1213  Solved: 576[Submit][Status][ ...

  10. Docker第一弹：下载运行hello-world程序

    1.需要安装好docker程序 没有安装的请看在centos 6.8下安装docker 2.从docker镜像仓库中拉去hello-world镜像 docker pull hello-world 3. ...