javascript-网页换肤案例

小结

 


比较运算符,请问 3 == “3” 的结果
true
等号两边的数据类型不一样 首先会进行转换,然后再进行比较

比较运算符,请问 3 === “3” 的结果
false
有三个等号会直接比较等号,两边的数据不会进行转换


逻辑运算符,请写出,与,或,非,的写法
与,&&
或,||
非,!

自增,a=3,请问alert(a++)的结果是多少
3

自增,a=3,请问alert(--a)的结果是多少
2


事件,标签对象oDiv绑定点击事件,点击触发move函数
oDiv.onclick = move

 

 

网页换肤的原理

变更样式

 

具体的实现步骤

1 实现点击事件

通过点击按钮来换肤的

需要,点击事件

onClick

1,获取按钮

2,绑定事件

<link rel="stylesheet" href="m1.css">

<script>
    // 当页面窗口加载完成后,执行函数中的内容
    window.onload = function () {
        // 通过id,选择到了一个标签对象
        var oBtn2 = document.getElementById('btn2')
        // 给标签对象添加一个鼠标点击事件
        oBtn2.onclick = chang_skin
    }


    function chang_skin() {
        alert('btn2 clicked')
    }

</script>


<input type="button" value="更换为皮肤1" id="btn1">
<input type="button" value="更换为皮肤2" id="btn2">

<h1>python一期学员网</h1>

<div>
    我们是python一期学员,现在学习有三个月了。<br>
    还有六个月时间就毕业了。
</div>

 

2,修改链接的样式文件

点击btn2,让link所链接的css文件,发生变化。让它指向m2.css

a,获取link标签对象

标签 = 通过getElementById()

b,修改link标签对象的herf属性的值

如何修改一个对象的属性值?

对象.属性 = 新值-

因此,只需要通过

标签.herf =新值



<script>
    // 当页面窗口加载完成后,执行函数中的内容
    window.onload = function () {
        // 通过id,选择到了一个标签对象
        var oBtn2 = document.getElementById('btn2')
        // 给标签对象添加一个鼠标点击事件
        oBtn2.onclick = chang_skin

    }


    function chang_skin() {
        // 获取link标签对象
        var oLk = document.getElementById('lk')
        // 修改link标签的herf属性
        oLk.href = "m2.css"
    }

</script>

<link rel="stylesheet" href="m1.css" id="lk">
<input type="button" value="更换为皮肤1" id="btn1">
<input type="button" value="更换为皮肤2" id="btn2">

<h1>python一期学员网</h1>

<div>
    我们是python一期学员,现在学习有三个月了。<br>
    还有六个月时间就毕业了。
</div>

 

知识点

对象.事件 = 函数的本体

 


版权声明:本文为ifubing原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。