zoukankan      html  css  js  c++  java
  • 【javascript dom读书笔记】 第九章 CSS-DOM

    用dom设置样式

    element.style.property = value

    何时用dom脚本设置样式

    作者写到:绝大多数的现代浏览器,虽然对css伪类的支持不是很完整,但是对dom都有良好的支持,所以需要考虑的是问题最简单的解决方案是什么,哪种解决方案会得到更多的浏览器支持。

    在尝试了书中dom设置的实例以后,虽然代码比css要多很多,但是有一种操纵的快感,这应该是dom编程的艺术所在吧,有一种后端语言的感觉,至于实际使用中的选择,见仁见智做出更适合的自己的决定。

    但最后作者说到有一种css用于无法与dom竞争:javascript的脚本能定时重复执行一组操作,实现css不能实现的效果。下一章的幻灯片里会给出演示!

    几个常用的封装函数

    因为有很多不错的常用函数,可以放到外部js中随时调用,下面介绍本书中的几个函数

    addLoadEvent

     1 function addLoadEvent(func){ 
     2 //将函数作为参数,此函数就是 onload 触发时需要执行的某个函数
     3     var oldonload=window.onload; 
     4     //将原来的 onload 的值赋给临时变量 oldonload。
     5     if(typeof window.onload!="function"){ 
     6     //判断 onload 的类型是否是 function。如果已经执行window.onload=function(){...} 赋值,那么此时 onload 的类型就是 function
     7     //否,则说明 onload 还没有被赋值,当前任务 func 为第一个加入的任务
     8         window.onload=func(); 
     9         //作为第一个任务,给 onload 赋值
    10     }else{ 
    11     //是,则说明 onload 已被赋值,onload 中先前已有任务加入
    12         window.onload=function(){
    13             oldonload();
    14             func(); 
    15             //作为后续任务,追加到先前的任务后面
    16         }
    17     }
    18 }

    下一个元素节点getNextElement

    1 function getNextElement(node){
    2     if(node.nodeType==1){
    3         return node;
    4     }
    5     if(node.nextSibling){
    6         return getNextElement(node.nextSibling);
    7     }
    8     return null;
    9 }

     

  • 相关阅读:
    Redis
    双向绑定篇
    Vue篇1
    css篇-页面布局-三栏布局
    css篇-简化版
    Promise篇
    几道JS代码手写面试题
    安全篇
    Vue篇
    跨域篇--JSONP原理
  • 原文地址:https://www.cnblogs.com/lijie33402/p/4433997.html
Copyright © 2011-2022 走看看