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";

    }

  • 相关阅读:
    优先队列
    Problem W UVA 662 二十三 Fast Food
    UVA 607 二十二 Scheduling Lectures
    UVA 590 二十一 Always on the run
    UVA 442 二十 Matrix Chain Multiplication
    UVA 437 十九 The Tower of Babylon
    UVA 10254 十八 The Priest Mathematician
    UVA 10453 十七 Make Palindrome
    UVA 10163 十六 Storage Keepers
    UVA 1252 十五 Twenty Questions
  • 原文地址:https://www.cnblogs.com/linyongli/p/5286757.html
Copyright © 2011-2022 走看看