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比较容易理解,主要是由八大类基础组件构成: 一.视 ...
随机推荐
- Cannot read property 'component' of undefined 即vue-router 0.x转化为2.x
原文链接:http://blog.csdn.net/m0_37754657/article/details/71269988 由于vue版本为1.0,没有一些vue-router指令:因而需要vue- ...
- 洛谷 [P1963] [NOI2009] 变换序列
这是一道二分图匹配的题 先%dalao博客 建图并没有什么难的,但是关键在于如何使字典序最小. 一个很显然的想法是先求出一个完美匹配,然后从x集合的第一个元素开始,如果该元素匹配的较小的一个,那么继续 ...
- POJ 2154 Color [Polya 数论]
和上题一样,只考虑旋转等价,只不过颜色和珠子$1e9$ 一样的式子 $\sum\limits_{i=1}^n m^{gcd(i,n)}$ 然后按$gcd$分类,枚举$n$的约数 如果这个也化不出来我莫 ...
- testlink用例的导出到Excel
一直在网上寻找怎么把testlink的用例导出到Excel中,以及把Excel中已经写好的用例导入到Testlink中的方法.根据现网的经验,然后修改了一下.贴出来,以飨有这方面需求的测试同仁. Te ...
- Python数据结构之二——tuple（元组）
Python版本:3.6.2 操作系统:Windows 作者:SmallWZQ 列表和元组是Python中最常见的内建序列.元组与列表一样,但是tuple一旦创建就不能修改.创建元组的语法非常简单 ...
- flex 布局 input 宽度不自适应
flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!
- 广告中的AdNetwork、AdExchange、DSP、SSP、RTB和DMP是什么？
[https://www.douban.com/note/557732418/?type=rec] AdNetwork.AdExchange.DSP.SSP.RTB.DMP这些模式之间存在着内在的关系 ...
- Inspinia_admin-V2.3原版（英文）
Inspinia_admin-V2.3原版(英文) Inspinia_admin-V2.3 BootStrap原版(英文) 原版是老外开发的,结果 国内某人翻译成中文版进行二次开发 卖998 演示地址 ...
- 获取目录-Winform
// 获取程序的基目录. System.AppDomain.CurrentDomain.BaseDirectory // 获取模块的完整路径. System.Diagnostics.Process.G ...
- 使用tdload工具将本地数据导入到Teradata数据库中
想把本地的数据文件(比如txt.csv)中的数据导入到Teradata虚拟机中的表中.既可以使用Teradata Assistant中的import功能,也可以使用fastload导入,前者的缺点是一 ...