style、 currentStyle、 runtimeStyle区别分析javascript技巧

Html代码 复制代码 收藏代码
  1. 1、obj.style只能获得内嵌样式（inline Style）就是写在Tag里面的，他访问不到那些链接的外部css和在head中用<style>声明的style。
  2. 所以必须认识到在那些使用外部Css文件的页面中，如果用style赋值，如obj.style=“color:red”;显然效果是正确的，其中的奥秘确是只是在该对象的tag上多添加了一个style属性，按照由小到大的优先级呈现罢了。
  3. 2、obj.currentStyle就强大多了，他能够获取关于这个节点所有位置的style，但是他也按照优先级，说穿了就是显示的是什么他就是指向哪一个style，如下代码字体优先是显示blue的，那currentStyle.color就是blue，当然此时style.color也会是blue。
  5. 复制代码 代码如下:
  7. <html>
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  10. <title>testStyle</title>
  11. <style>
  12. .lala{
  13. color:yellow;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="tt" style="color:blue;" class="lala">1111</div>
  19. </body>
  20. <script>
  21. alert(document.getElementById("tt").currentStyle.color);
  22. </script>
  23. </html>
  26. 若去掉以上<div>中的style为<div id="tt" class="lala">1111</div>，那么currentStyle.color就根据优先级变成了yellow，但是此时style.color为空。
  27. 3、runtimeStyle简单的说就是你可以对一个节点的样式赋值，他将成为最高优先级的节点样式。
  28. 如：
  30. 复制代码 代码如下:
  32. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  33. <html>
  34. <head>
  35. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  36. <style>
  37. .lala{
  38. color:yellow;
  39. }</style>
  40. </head>
  41. <body>
  42. <div id="tt" style="color:blue;" class="lala">1111</div>
  43. </body>
  44. <script>
  45. document.getElementById("tt").runtimeStyle.color="black";
  46. alert(document.getElementById("tt").currentStyle.color);
  47. alert(document.getElementById("tt").runtimeStyle.color);
  48. alert(document.getElementById("tt").style.color);
  49. </script>
  50. </html>
  53. 此时页面显示字的颜色是runtimeStyle赋值后的black。但是只有currentStyle.color和runtimeStyle本身能够取到这个值,style.color取到的依然是tag中的blue。   
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/bjanzhuo/p/3576100.html