Js修改元素内容

dsus ch

已于 2022-08-13 17:31:02 修改

阅读量118

点赞数 1

文章标签： javascript 前端 html css3

于 2022-08-13 13:21:37 首次发布

本文链接：https://blog.csdn.net/m0_63953314/article/details/126317606

版权

Js修改元素内容

文章目录

Js修改元素内容

修改元素内容的三要素

事件源
事件类型
事件处理程序

修改文字内容

innerHTML (可以识别html的标签)
innerText

Html代码

    <button>获取当前时间</button>
    <div>时间</div>
    <div class="null">
        前面带空格的文字
        <span>
            隐藏的内容
        </span>
    </div>

Js代码

        function getDate() {
            let date = new Date()
            return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
        }
        //获取元素
        let btn = document.querySelector('button')
        let div = document.querySelector('div')
        // 注册事件
        btn.onclick = function () {
            //改变元素内容
            div.innerText = getDate()
            //div.innerHTML = getDate()
        }

通过控制台打印可以发现innerText不识别HTML标签

       let div_null = document.querySelector('.null')
        console.log(div_null.innerText)//可以看到innerText不识别标签，还会去除空格
        console.log(div_null.innerHTML)

修改表单元素

HTML代码

    <form action="">
        <input type="text" value="请输入内容" id="scanf">
        <input type="button" value="提交" id="button">
    </form>

Js代码

       let scanf = document.getElementById('scanf')
        let btn = document.getElementById('button')
        btn.onclick = function () {
            scanf.disabled = true
            this.disabled = true
            alert('已提交输入')
        }

点击事件后不可再输入
点击之后不可再输入
注意修改input的内容，是通过修改value

显示与隐藏密码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示与隐藏密码</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        input {
            outline: none;
            width: 370px;
            border: 0;
            height: 30px;
        }

        img {
            position: absolute;
            right: 12px;
            top: 2px;
            width: 26px;
        }

        input[type="password"]::-ms-reveal {
            display: none
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="图片/眼睛_闭.png" alt="" id="button">
        </label>
        <input type="password" id="scanf">
    </div>
    <script>
        let bt = document.getElementById('button')
        let sf = document.getElementById('scanf')
        let flag = true
        bt.onclick = function () {
            if (flag) {
                sf.type = 'title'
                bt.src = "图片/眼睛_开.png"
                flag = false
            } else {
                sf.type = 'password'
                bt.src = "图片/眼睛_闭.png"
                flag = true
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

修改图片

点击按钮修改图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改图片</title>
    <style>
        img {
            width: 400px;
        }

        div {
            width: 400px;
            background-color: antiquewhite;
            text-align: center;
        }
    </style>
</head>

<body>
    <button>Elephant/Lion</button>
    <div>Elephant</div>
    <img src="图片/Elephant.jpg" alt="">
    <script>
        let btn = document.querySelector('button')
        let text = document.querySelector('div')
        let ph = document.querySelector('img')
        let flag = true
        btn.onclick = function () {
            if (flag) {
                text.innerHTML = 'Lion'
                ph.src = '图片/Lion.jpg'
                flag = false
                text.style.backgroundColor='red'
            }else{
                text.innerHTML = 'Elephant'
                ph.src = '图片/Elephant.jpg'
                flag = true
                text.style.backgroundColor='antiquewhite'
            }
        }
    </script>
</body>

</html>