JavaScript之Style属性学习
当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式,
一、Style属性
文档中的每一个元素都是一个对象,每个对象又有着各式各样的属性。有一些元素告诉我们元素在节点树上的位置信息。比如说,parentNode、nextSibling、previousSibling、childNodes、
firstChild、lastChild这些属性,就告诉了我们文档中各节点的之间的关系信息。又有一些属性比如nodeType、nodeName、nodeValue(这个属性注意只能获取文本元素节点的节点值)这些属性,告诉我们元素本身的信息。
除此之外,文档的每个元素都还有一个属性style。style属性包含着元素的样式，查询这个属性返回的是一个对象而不是一个简单的字符串。样式都存放在这个style对象的属性里。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/utility.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<style type="text/css">
p
{
color:blue;
}
</style> </head>
<body>
<p>asdas</p>
<script type="text/javascript">
window.onload = function () {
var para = document.getElementsByTagName("p")[0];
alert(typeof para.style);
}
</script>
</body>
</html>
输出:object; 说明style属性确实是一个对象；
这样我们就可以使用DOM的style属性去获取对应元素对象的style属性了,但是这里必须注意,必须谨记的一个地方,DOM 的style属性只能获取html标签内内嵌的style属性像下面代码这样:
<p style="color:Blue; font-size:16px;">asdas</
使用Style属性的注意点一:
如果标签的样式被定义在了外部文件里面,DOM将获取不到外部文件里面的style属性值。牢记这点很重要;
也许有人会认为那么这个DOM的style属性将没有任何的实用价值,应为我们在开发中一般会将表现和样式分离,几乎都会将样式表放入到外部css文件里面,这个时候就看你怎么使用DOM的style属性了,因为虽然我们无法获取外部文件里面的style属性,但是我们可以获取我们给DOM设置的样式,也就是说DOM的style属性不仅可以获取元素的style属性,还能给元素设置style属性，而我们给元素设置的style属性我们可以用DOM的style属性来获取。
使用Style属性的注意点二:
当我们使用Style属性去获取像font-weight和font-family这类的属性时,不能这些获取
目标元素.style.font-weight
应为你如果这样获取,JavaScript解释器会把font-weight中间的‘-’当作减号来看那上面这句代码的意思就变成(目标元素.style.font)减去weight变量的值,这将完全违背我们的本意.
所以这边DOM有相关的处理方法,当你需要引用一个中间带减号的css属性时,DOM要求你用驼峰命名法。css属性font-family编程fontFamily,其他类似的属性也用相同的方法操作。
二、Style属性实战
介绍完style属性之后,下面开始上代码了,代码如下
html:
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: "Helvetaica" , "Arial" ,sans-serif;
background-color: #fff;
color: #000;
}
table
{
margin: 0;
border: 1px solid #699;
}
caption
{
margin:auto;
padding:.2em;
font-size:1.2em;
font-weight:bold;
}
th
{
font-weight:normal;
font-style:italic;
text-align:left;
border:1px dotted #699;
background-color:#9cc;
color:#000;
}
tr
{
cursor:pointer; 、
}
th,td
{
width:10em;
padding:.5em;
}
</style>
</head>
<body>
<div>---------</div>
<table>
<caption>
Itinerary(旅程,路线)</caption>
<thead>
<tr>
<th>
When
</th>
<th>
Where
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
June 9th
</td>
<td>
Portland,<abbr title="Oregon">OR</abbr>
</td>
</tr>
<tr>
<td>
June 10th
</td>
<td>
Seattle,<abbr title="Washington">WA</abbr>
</td>
</tr>
<tr>
<td>
June 12th
</td>
<td>
Sacramento,<abbr title="California">CA</abbr>
</td>
</tr>
</tbody>
</table>
<div>---------</div>
<div>---------</div>
<script src="../js/utility.js" type="text/javascript"></script>
<script src="../js/index.js" type="text/javascript"></script>
<script type="text/javascript">
var insertposition = document.getElementsByTagName("div")[1];//指定缩略语列表的插入位置
displayAbbreviations(insertposition);
var loadeventlist = [stripeTable,displayAbbreviations];//将两个js方法放入window.onload队列里面
addOnloadEventlist(loadeventlist);
</script>
</body>
</html>
js代码:
//设置表格各种特性
function stripeTable() {
if (!checkCompatibility) return;
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
var rows = tables[i].getElementsByTagName("tr");
alert(rows[0].innerHtml);
var flag = false;
for (var j = 0; j < rows.length; j++) {
//表格隔行变色效果逻辑
if (flag == true) {
rows[j].style.backgroundColor = "#ffc";
flag = false;
}
else {
flag = true;
}
//鼠标放上去当前行文本加黑加粗
rows[j].onmouseover = function () {
this.style.fontWeight = "bold";
}
rows[j].onmouseout = function () {
this.style.fontWeight = "normal";
}
}
}
} /*
检查浏览器的兼容性,是否支持查用的DOM方法
check the compatibility of the broswer
*/
function checkCompatibility() {
if (!document.getElementById) return false;
if (!document.createElement) return false;
if (!document.createTextNode) return false;
if (!document.getElementsByTagName) return false;
if (!document.getElementsByName) return false;
return true;
}
/*
addOnloadEvent的扩展版因为每次添加一个函数都需要调用addOnloadEvent()函数,所以为了节省代码,将需要绑定的函数名写入到一个数组里面,
然后将数组引用,传递给addOnloadEventlist();每次添加,只需将函数名,写到数组里面即可
@param eventlist -需要与window.onload事件绑定的函数名数组
*/
function addOnloadEventlist(eventlist) {
if (!eventlist) return false;
var oldonload = window.onload;
window.onload = function () {
for (var i = 0; i < eventlist.length; i++) {
eventlist[i]();
}
}
}
说下效果:简单实现table表格的隔行变色,和当鼠标在数据行上悬浮时,数据加黑加粗显示;
实现这个效果的关键是如下代码:
rows[j].style.backgroundColor = "#ffc"; //当前行的背景色变成#ffc
this.style.fontWeight = "bold"; //当前行的字体颜色加粗
this.style.fontWeight = "normal"; //当前行的字体从加粗变为正常
这三段代码分别利用style属性设置了当我们的动作发生时,table表格相应的会做那些变化；
但是我们仔细思考下，如果这里有一天我们的需求变了,这个表格隔行变色的背景色了,我们要换个颜色,这时候我们又要来修改js代码,而且这不是关键,关键是如果我们还需要加其他的显示效果，这个时候为了加这个效果,我们必须在加一行代码,所以这种方式添加效果的方式并不是很好。所以这个时候如果把Css和JavaScript结合往往能产生很好的效果,关于这个你可以去我的下一个随笔关于className属性的介绍http://www.cnblogs.com/GreenLeaves/p/5757216.html
这篇随笔就是教我们如何通过DOM的className属性来减少我们对控制元素样式的代码量。
JavaScript之Style属性学习的更多相关文章
- JavaScript之ClassName属性学习
在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你 ...
- CSS和JavaScript标签style属性对照表
CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,后面字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border ...
- JavaScript CSS Style属性对照表
JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...
- javascript原生style属性分析
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- JS中style属性
解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...
- style属性css与javascript对照表
有时候会用javascript来控制标签的style,但js的style属性写法跟css有点不一样,通常是一个单词的写法不变,单词-单词属性会去掉“-”,再把第二个单词的首字母大写,估计是为了与减法运 ...
- JavaScript入门--慕课网学习笔记
JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...
- 《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
随机推荐
- HTML5 服务器发送事件(Server-Sent Events)介绍
w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...
- CC++初学者编程教程(9) Windows8.1安装VS2013并捆绑QT与编程助手
我们在Windows8.1安装VS2013并捆绑QT与编程助手需要下列文件. 2. 在虚拟机中开启Windows8.1 3.然后选择VS2013的安装镜像. 4.将镜像复制到虚拟机. 5.我们装载这个 ...
- poj1504--求两个数的反转数的和的反转数
题意:给定4321 5678,结果再反转(1234+8756) 一开始以为是poj1503一样,就稀里糊涂的敲代码,实际上有不同 如题:先求1234 + 8765 ------------------ ...
- C4.5较ID3的改进
1.ID3选择最大化Information Gain的属性进行划分 C4.5选择最大化Gain Ratio的属性进行划分 规避问题:ID3偏好将数据分为很多份的属性 解决:将划分后数据集的个数考虑 ...
- Linux学习之六-Yum命令的使用
详细介绍一下yum命令的用法.如果你是一个Linux的初学者,一定会被软件的安装所困扰过,尽管RPM包解决了一定层度的问题,但有些RPM的包的依赖关系让人很是头疼.而YUM.APT等一些RPM包的管理 ...
- box-shadow属性
一.定义和用法 box-shadow属性 向框添加一个或多个阴影. 二.语法 box-shadow: h-shadow v-shadow blur spread color inset; h-shad ...
- SharePoint解决方案由VS2010升级到VS2013部署页面报错
“/”应用程序中的服务器错误.----------------------------------------文件“/_CONTROLTEMPLATES/....../XXXUserControl.a ...
- C#自定义字符串替换Replace方法
前一阵遇到一个如标题的算法题,是将原有字符串的某些片段替换成指定的新字符串片段,例如将源字符串:abcdeabcdfbcdefg中的cde替换成12345,得到结果字符串:ab12345abcdfb1 ...
- Programming C#.Interfaces
类实现一个接口时,它必须实现该接口的所有部分(方法和属性等),效果相当于类要表明:“我同意履行这个接口所定义的协定.” 从抽象类继承实现了“is-a(是一种)”关系,实现接口时一种“implement ...
- Android setOnTouchListener识别滑动手势
setOnTouchListener(new OnTouchListener() { private float startX, startY, offsetX, offsetY; @Override ...