javascript-网页换肤案例

最新推荐文章于 2022-07-22 19:59:54 发布

原创最新推荐文章于 2022-07-22 19:59:54 发布 · 480 阅读

2 ·

CC 4.0 BY-SA版权

本文解析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>