千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 >  html5视频教程  >  千锋HTML5视频教程之元素样式操作

千锋HTML5视频教程之元素样式操作

时间:2018-09-10 17:00     来源:千锋教育 作者:千锋HTML5

  行间样式

  在前面的小节中,讲解了DOM如何操作HTML元素的属性,同为HTML元素的style属性也能够获取和设置,具体如例3-1所示。

  1 <!doctype html>

  2 <html>

  3 <head>

  4 <meta charset="utf-8">

  5 <title>Hello JS</title>

  6 </head>

  7 <body>

  8 <div id="div1" style="width:100px; height:50px;

  9 background:red;">hello</div>

  10 </body>

  11 </html>

  12 <script>

  13 var div = document.getElementById('div1');

  14 console.log(div.style);

  15 console.log(div.style.width);

  16 console.log(div.style.height);

  17 console.log(div.style.background);

  18 </script>

  调试结果如图3.1所示。

图片1

  图3.1 调试获取style属性中的样式

  可以发现,div.style包含很多默认样式值,当不设置样式时,这些默认值都为空字符串。style中的样式获取,也可以设置,具体如例3-2所示。

  1 <!doctype html>

  2 <html>

  3 <head>

  4 <meta charset="utf-8">

  5 <title>Hello JS</title>

  6 </head>

  7 <body>

  8 <div id="div1" style="width:100px; height:50px;

  9 background:red;">hello</div>

  10 </body>

  11 </html>

  12 <script>

  13 var div = document.getElementById('div1');

  14 div.style.width = '200px';

  15 div.style.height = '100px';

  16 div.style.background = 'blue';

  17 </script>

  运行结果如图3.2所示。

图片2

  图3.2 设置style属性中的样式

  cssText

  在style属性下操作多组样式,需要一行行设置,比较繁琐。DOM提供了cssText属性,可用来一次性设置多组CSS样式,注意cssText属性是在style对象的下面,具体示例如下。

  1 <body>

  2 <div id="div1" style="width:100px; height:50px;

  3 background:red;">hello</div>

  4 </body>

  5 <script>

  6 var div = document.getElementById('div1');

  7 div.style.cssText = 'width:200px; height:100px; background:blue;';

  8 </script>

  从上例可以发现,cssText中样式的写法与CSS样式的写法类似,通过冒号和分号进行操作,这样设置简单明了。但需要注意,当出现多个cssText属性时,后面会覆盖前面整个cssText中的样式。

  非行间样式

  上一小节中获取和设置的样式,都是通过style属性来完成的,这些操作都是在行间完成的,对于非行间样式并不可用,具体示例如下:

  1 <style>

  2 #div1{ width:200px; height:200px; background:red; }

  3 </style>

  4 <body>

  5 <div id="div1">hello</div>

  6 </body>

  7 <script>

  8 var div = document.getElementById('div1');

  9 console.log(div.style.width); // ''

  10 console.log(div.style.height); // ''

  11 console.log(div.style.background); // ''

  12 </script>

  style属性只能获取到行间样式,并不能获取到<style>标签中的非行间样式,因此返回结果并没有值,而是返回空字符串。可以发现,这对于开发并不是特别方便,如需要获取非行间中的样式,DOM该如何操作?

  window.getComputedStyle()是标准规范下提供的获取最终样式的方法,最终样式即包括行间样式和非行间样式,因此可通过其来完成想要实现的需求。其语法格式如下。

  window.getComputedStyle(元素).样式;

  window对象是可选的,表示窗口对象。在后面的章节中会详细的介绍window对象,这里先记住这种写法即可。

  接下来通过案例来演示获取非行间样式,具体如例所示。

  1 <!doctype html>

  2 <html>

  3 <head>

  4 <meta charset="utf-8">

  5 <title>Hello JS</title>

  6 <style>

  7 #div1{ width:200px; height:200px; background:red; }

  8 </style>

  9 </head>

  10 <body>

  11 <div id="div1">hello</div>

  12 </body>

  13 </html>

  14 <script>

  15 var div = document.getElementById('div1');

  16 console.log(window.getComputedStyle(div).width)

  17 console.log(window.getComputedStyle(div).height);

  18 console.log(window.getComputedStyle(div).background);

  19 </script>

  调试结果如图3.3所示。

图片3

  图3.3 getComputedStyle()方法调试结果

  可以发现,通过background属性获取到的值为复合样式。如果只获取到背景色,需要通过单一样式来获取。

  这里需要注意,在JavaScript语法中是不支持横杠的,因此不能在语法中出现类似background-color这种写法。当有这种需求时,JavaScript中通过去掉横杠,并且设置横杠后的第一个字母为大写的方式来实现,类似于驼峰的命名方式。具体示例如下:

  1 <script>

  2 console.log(window.getComputedStyle(div).backgroundColor);

  3 //rgb(255, 0, 0)

  4 </script>

  当然这里返回了rgb方式的颜色,这个属于内部转化的形式,这里不再深究。

  因为获取到的是最终样式,所以假设即有行间样式,也有非行间样式,最终样式即是优先级高的样式。接下来通过案例来演示,如例所示。

  1 <!doctype html>

  2 <html>

  3 <head>

  4 <meta charset="utf-8">

  5 <title>Hello JS(/title>

  6 <style>

  7 #div1{ width:200px; height:200px; background:red; }

  8 </style>

  9 </head>

  10 <body>

  11 <div id="div1" style="width:100px;">hello(/div>

  12 </body>

  13 </html>

  14 <script>

  15 var div = document.getElementById('div1');

  16 console.log(window.getComputedStyle(div).width); // '100px'

  17 </script>

  运行结果如图3.4所示。

图片4

  图3.4 示例运行结果

  可以发现,最终样式的宽值返回100px,这是因为行间样式的优先级要比非行间样式的优先级高。

  window.getComputedStyle()方法是标准规范下提供的操作,对于之前一些老旧的浏览器,可能并不支持,因此可以利用currentStyle对象来实现兼容处理。其语法格式如下。

  元素.currentStyle.样式;

  接下来通过案例来演示老式浏览器下currentStyle返回的值,具体如例所示。

  1 <!doctype html>

  2 <html>

  3 <head>

  4 <meta charset="utf-8">

  5 <title>Hello JS</title>

  6 <style>

  7 #div1{ width:200px; height:200px; background:red; }

  8 </style>

  9 </head>

  10 <body>

  11 <div id="div1">hello</div>

  12 </body>

  13 </html>

  14 <script>

  15 var div = document.getElementById('div1');

  16 console.log(div.currentStyle.width);

  17 console.log(div.currentStyle.height);

  18 console.log(div.currentStyle.backgroundColor);

  19 </script>

  调试结果如图3.5所示。

图片5

  图3.5 在老式浏览器下currentStyle返回的值

  无论是getComputedStyle()方式还是currentStyle方式,都是只能获取到非行间样式,并不能设置非行间样式。

  那么如何在JavaScript中进行非行间样式的设置呢?一般情况下这种需求非常少见但JavaScript是有这个能力的,下面只是对此功能进行了解即可,不必深究。接下来通过案例来演示,如例所示。

  1 <!doctype html>

  2 <html>

  3 <head>

  4 <meta charset="utf-8">

  5 <title>Hello JS(/title>

  6 <style>

  7 #div1{ width:200px; height:200px; background:red; }

  8 </style>

  9 </head>

  10 <body>

  11 <div id="div1">hello(/div>

  12 </body>

  13 </html>

  14 <script>

  15 var div = document.getElementById('div1');

  16 document.styleSheets[0].rules[0].style.width = '100px';

  17 document.styleSheets[0].rules[0].style.height = '100px';

  18 document.styleSheets[0].rules[0].style.background = 'blue';

  19</script>

  调试结果如图3.6所示。

图片6

  图3.6 设置非行间样式

  通过chrome浏览器的控制台样式,可以发现非行间样式发生了改变,styleSheets[0]表示获取到document文档下的第一个样式表,rules[0]则表示样式表中的第一个样式。

  学习HTML5,可以参考千锋提供的HTML5学习路线,该学习路线对从零基础小白到web前端初级开发工程师,web前端高级开发工程师,后面的web前端大神级开发工程师都有一个明确清晰的指导,结合千锋全套HTML5视频教程,可以让你对学习web前端开发需要掌握的知识有个清晰的了解,并快速入门web前端开发。

上一篇:千锋HTML5视频教程之获取元素
下一篇:
  • 北京天丰利校区(总部)地址:北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2、3层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋3楼
    咨询电话: 0755-23015275/23015546-801(硅谷) 0755-86660670-801(大学城)
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990 021-65233829-609
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 郑州校区地址:郑州市二七区航海中路60号海为科技园C区10层、12层
    咨询电话:0371-55191750
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 广州校区地址:广州市天河区元岗路200号慧通产业园B9三层
    咨询电话:020-38035223 020-38035220
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:027-59313371
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、360网络安全、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:400-811-9990 028-83178771
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85363390
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 杭州旺田校区:浙江省杭州市江干区九堡旺田书画城A座4层
    杭州龙驰校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层
    咨询电话:400-811-9990 0571-86893632/0571-86094032
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层801
    咨询电话:0532-80911190
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990 023-68883009
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513210
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号 科技创新城19号楼B座五楼
    咨询电话:400-811-9990/0451-87173191
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 南京校区地址:南京市建邺区应天大街780号应天智汇产业园弘辉园1幢2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、360网络安全、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、区块链、红帽RHCE认证、好程序员
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱