20160222-智能社js视频-课时1-2

• js里的三个事件
• onclick() #鼠标点击事件
• onmouseover() #鼠标滑入事件
• onmouseover() #鼠标划出事件
• js里获取元素ID 命令：doctument.getElementById()
  为了简化代码，一般会把该命令赋值给一个变量

var obj = document.getElementById("text");
text.style.display = "none";
// 注意引号

• 网页换肤

1. 通过按钮绑定onclick事件在两个css文件之间切换
2. 创建函数，通过getElementById获取link标签
3. 改变<link>的href属性值
4. html里怎么写，js里也怎么写，除了给元素添加class属性时要用className，因为在js里class是保留字

function change() {
    var obj = document.getElementById("link");
    obj.href = "css1.css";
    obj.className = "box" ；
}
//这里只为演示className如何使用，给<link>添加class无意义
// HTML里的调用改函数<input type="button" onclick="change()">  

• 通过if判断实现按钮显示/隐藏

1. 在html里添加input和div标签，设置div的样式，input的type为button，绑定onclick事件
2. 在js里创建函数，通过getElementById获取div元素并赋值给一个变量
3. 通过if语句判断，如果div的display属性为none，则将其变为block，同时改变input的value为隐藏；反之将display改为none，value改为显示

function showHidden() {
    var obj1 = document.getElementById("div1");
    var obj2 = document.getElementById("input1");
    if (obj1.style.display == "none") {
        obj1.style.display = "block";
        obj2.value = "隐藏"；
    } else {
        obj.style.display = "none";
        obj2.value = "显示";
    }
}
// 在<input>标签里调用showHidden()函数

课时1-2在线demo

ps:由于无法引入两份css，所以换肤没有用<link>，而是替换class属性