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属性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,945评论 2 17
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,930评论 0 1
  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 823评论 0 0
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,120评论 1 10
  • HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使...
    aymincoder阅读 5,148评论 2 188