zoukankan      html  css  js  c++  java
  • L2-初探JavaScript魅力(1)

    getElementById

    在JavaScript中,不得不说的是查找元素,然后再进行对其操作。getElementById(Id)是我们第一个js兼容问题,也是常用的方法。在火狐浏览器下直接使用ID是会存在问题的,要解决这个问题,就需要引入document.getElementById(Id)。document.getElementById在任何浏览器下均可使用。

    案例:网页换肤

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>换肤</title>
    <link id="l1" rel="stylesheet" href="pink.css"/>
    </head>
    <body>
    <input type="button" value="皮肤1" onclick="skinPink()"/>
    <input type="button" value="皮肤2" onclick="skinGreen()"/>
    </body>
    </html>

    pink.css

    body{background:pink;}

    input{200px; height:50px; background:green;}

    green.css

    body{background:green;}

    input{200px; height:50px; background:pink;}

    js

    function skinPink(){

    var oLi = document.getElementById('l1');

    oLi.href = "pink.css";

    }

    function skinGreen(){

    var oLi = document.getElementById('l1');

    oLi.href = "green.css";

    }

    在上案例网页换肤的案例中,可以得出这样一个结论:

      - 任何标签都可以加ID,包括link ;

      - 任何标签的任何属性,也都可以修改;

      - html怎么写,js里就怎么写,但是也有个例外,就是元素的class,元素的class并不能写成元素.class=xxx,应该是元素.className = xxx。

    JavaScript 第一个语句 ——if判断

    案例:点击”更多“按钮,实现显示和隐藏Div

    实现原理分析:

      当用户点击的时候,如果Div是显示的    隐藏掉 = oDiv.style.display = 'none'

    或者Div是隐藏的  显示出来 = oDiv.style.display = 'block'

    基本语法:

    if(Div是显示){

      oDiv.style.display = 'none';

    }

    else{

      oDiv.style.display = 'block';

    }

    总结: 初探JavaScript的魅力(1)

        js是什么?JavaScript是根据用户的操作来修改页面的样式或属性。

        事件:有onclick , onmouseover, onmouseout等等。

        函数:直接在事件内写代码会很乱。函数对于任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方任何时候调用执行。

        getElementById:获取操作对象的方法之一

        if判断:大多数编程语言中常用的一个语句

    function skinPink(){

    var oLi = document.getElementById('l1');

    oLi.href = "pink.css";

    }

  • 相关阅读:
    Dubbo支持的协议的详解
    db2 SQL6036N解决办法
    9-5 HTTP注解演示及注意事项讲解
    9-4 Feign之HTTP注解介绍
    9-3 Feign演示及Feign注解解析
    9-2 Feign环境准备
    9-1 Feign自我介绍
    8-30 Hystrix章节总结
    8-29 实战技巧:如何设置线程池
    8-28 Hystrix监控讲解与演示
  • 原文地址:https://www.cnblogs.com/linyongli/p/5286757.html
Copyright © 2011-2022 走看看