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"; //当前行的背景色变成#ffcthis.style.fontWeight = "bold"; //当前行的字体颜色加粗this.style.fontWeight = "normal"; //当前行的字体从加粗变为正常
这三段代码分别利用style属性设置了当我们的动作发生时,table表格相应的会做那些变化;
但是我们仔细思考下,如果这里有一天我们的需求变了,这个表格隔行变色的背景色了,我们要换个颜色,这时候我们又要来修改js代码,而且这不是关键,关键是如果我们还需要加其他的显示效果,这个时候为了加这个效果,我们必须在加一行代码,所以这种方式添加效果的方式并不是很好。所以这个时候如果把Css和JavaScript结合往往能产生很好的效果,关于这个你可以去我的下一个随笔关于className属性的介绍http://www.cnblogs.com/GreenLeaves/p/5757216.html
这篇随笔就是教我们如何通过DOM的className属性来减少我们对控制元素样式的代码量。
转载于:https://www.cnblogs.com/GreenLeaves/p/5753942.html
JavaScript之Style属性学习相关推荐
- JavaScript之ClassName属性学习
在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你 ...
- JavaScript CSS Style属性对照表
为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性. 比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样: 代码 <script type=&quo ...
- html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
- html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
- html title属性无效_【学习教程】使用JavaScript删除CSS属性
方法1:使用CSS removeProperty:该CSSStyleDeclaration.removeProperty()方法被用来从一个元件的样式删除一个属性.通过遍历styleSheets数组并 ...
- html通过id设置css样式,JavaScript修改style,id,class等css属性样式方法总结
JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样 ...
- 【JavaScript】Document对象学习
Document 对象 当浏览器载入 HTML 文档, 它就会成为 Document 对象. Document 对象是 HTML 文档的根节点. Document 对象使我们可以从脚本中对 HTML ...
- 【JavaScript】相关知识学习笔记
JavaScript笔记 定义: JavaScript是一种基于对象和事件驱动的,并具有安全性能的脚本语言. 特点: 01.向HTML页面中添加交互行为 02.脚本语言,语法跟java类似 ...
- 《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
最新文章
- 京东玩三角恋,结果“擦枪走火”
- php连mssql 中文乱码,PHP连接MSSQL显示中文时为乱码_PHP教程
- PrepareStatement 和Statement 的区别?
- python删除字符串_Python3 - 删除字符串中不需要的字符
- eclipse新建的maven项目没有dependencies_Maven中dependencies与dependencyManagement的区别
- 一篇弄懂 HTTP和HTTPS基本关系
- 指定 年-月-日 将其封装tree树状结构
- 192.168.8.1手机登陆_192.168.1.1手机登陆
- 车辆属性识别、车型识别
- mac 硬盘读写速度测试 软件,MAC硬盘速度测试技巧
- 常用中文字体的Unicode编码
- Character controller
- 6成人跳槽为钱,最新裸辞调查报告出炉!
- criterion of IMAP4.search 限制规范
- 【动态规划】入门练习题浅总
- PHP计算中文文字个数
- 实现防火墙的主要技术
- 北京航空航天大学计算机科学与工程系,北京航空航天大学计算机科学与工程系.ppt...
- 【LeetCode】263.丑数 264. 丑数 II
- python取值范围到无穷大_python的特殊数字类型(无穷大、无穷小等)