查看: 443|回复: 0

[DIV/CSS] 《DOM编程艺术》中CSS—DOM的总结(三)

发表于 2016-6-28 08:04:17

前言:这是CSS-DOM系列最后一篇,本文主要总结了className的用法,以及最后对函数进行抽象。

------------------我是分割线--------------------

1.className属性

前两篇一直是用DOM直接设置或者修改CSS样式,这属于让js的“行为层”干CSS“表示层”活,试想,一旦你要再次修改由DOM脚本设置的样式,就需要在js代码中各种一通找,很麻烦并且如果代码较多的时候你或许会疯掉。
一个思考:为什么不用js直接更改元素节点的class类名选择器呢?
甚至你都不用在HTML中事先布置好这个class类名选择器,因为className属性是一个可读/可写的属性,如果元素节点事先没有定义一个class类名选择器,直接写ele.calssName = "你设置的类选择器名"会直接为元素节点添加class类名选择器,从而实现更改元素节点的样式。

所以就会出现这种方案:只需要在CSS中添加一个特定的类名选择器定义样式,用js代码直接操作这个class选择器赋值给HTML中的某个节点。当想改变这个节点的样式时,不用在js代码中找寻,只需要在CSS中直接改成你想要的样式就ok了。

2.一个Demo

多说无益,还是上代码来得实在

还记得《DOM编程艺术》中CSS—DOM的总结(一)中那个无聊的“根据元素在节点树里的位置来设置样式”的Demo吧?现在可以用className属性直接更改样式了。

(1)HTML部分-没有变化
  1. <h1>Hold the page</h1>
  2. <p>第一段写点什么呢?</p>
  3. <p>我来讲一段故事:从前有座山,山里一个庙...</p>
  4. <p>别走啊!!!最精彩的还在后面,旁边有一座尼姑庵...</p>
  5. <h1>还有!!!还有!!!</h1>
  6. <p>你听我讲,慢慢听我讲,这个故事很精彩</p>
  7. <p>你可以评论我的文章,我告诉你后续故事,真的很精彩,不骗你。</p>
复制代码
(2)CSS部分-添加一个class选择器
  1. .intro{
  2. font-weight:bold;
  3. dont-size:20px;
  4. }
复制代码
(3)js代码部分-对styleHeaderSiblings函数进行一些改造

此时不直接用elem.style.fontWeight更改样式,而是在遍历到每一个h1紧邻着的p标签之后,直接为其添加class属性选择器,并且把这个属性指定为第(二)步中添加的CSS样式。

  1. function styleHeaderSiblings(){
  2. if(!document.getElementsByTagName){
  3. return false;
  4. }
  5. var headers = document.getElementsByTagName("h1");
  6. var elem;
  7. for(var i = 0; i<headers.length; i++){
  8. elem = getNextElement(headers[i].nextSibling);
  9. elem.calssName = "intro";
  10. }
  11. }
复制代码

其他的函数都没有做改变,现在如果想再次更改样式,只需要在CSS中更改样式就OK了。

3.对函数进行抽象

再来看看styleHeaderSiblings函数,这个函数仅仅适用于h1元素,className属性值"intro"都是硬编码在函数中,所以没有通用性,所以需要对这个函数进行一些抽象,从而让它的用途更广泛。

(1)首先增加两个参数
  1. function styleElementSiblings(tag,theclass)
复制代码

第一个参数tag代表你想要替换的元素节点,本例是根据位置更换样式,特殊情况所以是h1,而不是紧跟着的p标签。

第二个参数theclass代表你想为元素节点更换的class类名选择器,本例是"intro"

抽象前:

  1. function styleHeaderSiblings(){
  2. if(!document.getElementsByTagName){
  3. return false;
  4. }
  5. var headers = document.getElementsByTagName("h1");
  6. var elem;
  7. for(var i = 0; i<headers.length; i++){
  8. elem = getNextElement(headers[i].nextSibling);
  9. elem.className = "intro";
  10. }
  11. }
复制代码
(2)抽象出一个addClass函数

由于className属性直接就更改了class类名选择器,所以如果元素事先设置了class类名选择器,原有的样式会失效,所以需要再次抽象一个添加className的函数,取名叫addClass,有两个参数,一个是目标元素element(本例中这次是p标签),一个是值value(本例中是"intro")

如果元素没有class属性选择器,就把value值直接赋给它
如果有,就加个空格,再给它追加一个class类选择器

抽象后

  1. function addClass(element,value){
  2. if(!element.className){
  3. element.calssName = value;
  4. }else{
  5. newClassName = element.className;
  6. newClassName = " ";
  7. newClassName += value;
  8. element.className = newClassName;
  9. }
  10. }
  11. function styleHeaderSiblings(tag,theclass){
  12. if(!document.getElementsByTagName){
  13. return false;
  14. }
  15. var elems = document.getElementsByTagName("tag");
  16. var elem;
  17. for(var i = 0; i<elems.length; i++){
  18. elem = getNextElement(elems[i].nextSibling);
  19. addClass(elem,theclass);
  20. }
  21. }
复制代码
4.完整源码

老规矩了,上源码~~~欢迎留言拍砖评论交流~~~~

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>exampl</title>
  6. <style>
  7. .intro{
  8. font-weight: bold;
  9. font-size: 20px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h1>Hold the page</h1>
  15. <p>第一段写点什么呢?</p>
  16. <p>我来讲一段故事:从前有座山,山里一个庙...</p>
  17. <p>别走啊!!!最精彩的还在后面,旁边有一座尼姑庵...</p>
  18. <h1>还有!!!还有!!!</h1>
  19. <p>你听我讲,慢慢听我讲,这个故事很精彩</p>
  20. <p>你可以评论我的文章,我告诉你后续故事,真的很精彩,不骗你。</p>
  21. <!--js代码-->
  22. <script>
  23. function styleHeaderSiblings(){
  24. if(!document.getElementsByTagName){
  25. return false;
  26. }
  27. var headers = document.getElementsByTagName("h1");
  28. var elem;
  29. for(var i = 0; i<headers.length; i++){
  30. elem = getNextElement(headers[i].nextSibling);
  31. addClass(elem,theclass);
  32. }
  33. }
  34. function addClass(element,value){
  35. if(!element.className){
  36. element.calssName = value;
  37. }else{
  38. newClassName = element.className;
  39. newClassName = " ";
  40. newClassName += value;
  41. element.className = newClassName;
  42. }
  43. }
  44. function getNextElement(node){
  45. if(node.nodeType == 1){
  46. return node;
  47. }
  48. if(node.nextSibling){
  49. return getNextElement(node.nextSibling);
  50. }
  51. return null;
  52. }
  53. function addLoadEvent(func){
  54. //把现有的window.onload存入变量oldonload
  55. var oldonload = window.onload;
  56. if(typeof window.onload != 'function'){
  57. window.onload = func;
  58. }else{
  59. window.onload = function(){
  60. oldonload();
  61. func();
  62. }
  63. }
  64. }
  65. addLoadEvent(styleHeaderSiblings);
  66. </script>
  67. </body>
  68. </html>
复制代码


回复

使用道具 举报