L2-初探JavaScript魅力
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了L2-初探JavaScript魅力相关的知识，希望对你有一定的参考价值。
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魅力的主要内容，如果未能解决你的问题，请参考以下文章