• 附录 CSS和JavaScript

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • CSS简明教程

    CSS属性和取值范围:   http://htmldog.com/reference/cssproperties/

    CCS选择符

    • 多个选择符,用逗号分隔
    • 上下文选择符,中间是空格
    • ID选择符
    • 伪类选择符   :hover    :visited
    • 属性选择符(CSS3新功能)    input[type="text"]{ background-color:silver;}

    http://www.prosetech.com/html5/Chapter%2002/ApocalypsePage_Original.html

    • JavaScript简明教程

    JavaScript支持的事件更多参见:http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp

    JavaScript数组异常灵活,不必定义数组的项数。

    var colorList=[];

    colorList.push("green");

    colorList.push("red");

    colorList[3]="magena";

    JavaScript在沙箱中运行,能够做的就是更新页面;从服务器取得数据和向服务器发送数据

    常用的HTML对象属性

    • className
    • innerHTML
    • parentElement
    • style
    • tagName  //返回不带尖括号的HTML元素的标签名,譬如img

    动态链接事件

    <script>

    window.onload = function() {

      var imgObject = document.getElementById("dayImage");

      imgObject.onclick = swapImage;         //千万不要写成 imgObject.onclick = swapImage().  这样会把执行函数的返回值用于设置结果处理程序的

    };

    var dayTime = true;

    function swapImage() {

      //用户点击的时候触发这个函数

      var imgObject = document.getElementById("dayImage");

      if (dayTime == true) {

        dayTime = false;

        imgObject.src = "cloudy.jpg";

      }

      else {

        dayTime = true;

        imgObject.src = "sunny.jpg";

      }

    }

    </script>

    嵌入事件

    上面的例子也可以这样写

    var imgObject = document.getElementById("dayImage");

    imageObject.onclick=function(){

        //原来的swapImage的代码放到这里

    }

    • 标签:
    • CSS
    • 事件
    • var
    • imgobject
    • swapimage
    • true
    • dayimage
    • daytime
    • javascript
    • 选择符
    • document.getelementbyid
  • 加入的知识群:
    学习元评论 (0条)

    评论为空
    聪明如你,不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论
      
暂无内容~~
顶部