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