实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性

实现图片点击切换

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    * {
        box-sizing: border-box;
    }

    .box {
        background-color: pink;
        width: 200px;
        height: 150px;
        border: 1px solid black;

    }
    #NameBox{
        font-size: 50px;
        text-align: center;
        line-height: 150px;
        color: azure;
    }
style>

<body>
    <div class="box" id="NameBox">div>
    <img src="../img/1.jpeg">


    <script>
        const box = document.querySelector('.box')
        const NameBox = document.getElementById('NameBox');
        box.style.width = '400px'

        function getRandom(N, M) {
            return Math.floor(Math.random() * (M - N + 1)) + N
        }

        const img = document.querySelector('img')//获取元素
        const random = getRandom(1, 6)
        img.src = `../img/${random}.jpeg`


        let num = 1;

        function showMessage() {
            num++;
            if (num % 5 === 0) {
                img.src = `../img/3.jpeg`
                NameBox.textContent = '图片3';
            } else if (num % 2 === 0) {
                img.src = `../img/2.jpeg`
                NameBox.textContent = '图片2';
            } else {
                img.src = `../img/1.jpeg`
                NameBox.textContent = '图片1';
            }
            console.log(num);
            // img.src = `../img/${num}.jpeg`

            

        }
        img.addEventListener('click', showMessage)//img
    script>
body>

html>

通过classList修改样式

实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第1张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    .box{
        width: 200px;
        height: 200px;
        color: #333;
    }
    .active{
        color: red;
        background-color: pink;
    }
style>
<body>
    <div class="box">文字div>
    <script>
        //通过classList添加
        //获取元素
        const box = document.querySelector('.box')
        //修改样式 
        //追加类 add() 类名不加点 并且是字符串
        box.classList.add('active')
        //删除类 remove() 类名不加点 并且是字符串
        box.classList.remove('box')
        //切换类 toggle() 有就删掉,没有就加上
        box.classList.toggle('active')

    script>
body>
html>

实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第2张图片

操作表单元素属性

实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第3张图片
实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第4张图片
实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第5张图片
实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第6张图片

自定义属性

实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第7张图片

实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第8张图片

实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第9张图片
实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第10张图片
输出结果为
实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第11张图片
实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第12张图片
实现图片点击切换、通过classList修改样式、操作表单元素属性、自定义属性_第13张图片

你可能感兴趣的:(前端)