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{width:200px; height:50px; background:green;}

green.css

body{background:green;}

input{width: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";

}

你可能感兴趣的:(L2-初探JavaScript魅力(1))