DOM操作元素，修改元素内容，修改元素样式

最新推荐文章于 2023-02-12 22:10:34 发布

mewgulfszd！

最新推荐文章于 2023-02-12 22:10:34 发布

阅读量954

点赞数

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/CLhen/article/details/125426052

版权

我们可以利用DOM操作元素来改变元素里面的内容、属性等。

1、操作元素内容：element.innerText和element.innerHTML

<body>
    <button>按钮</button>
    <div>这是一个盒子</div>
    <p>abc</p>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function () {
            // div.innerText = "里面什么都没有";
            div.innerText = getTime();
        }

        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        // 元素可不添加事件
        var p = document.querySelector('p');
        p.innerHTML = getTime();
    </script>
</body>

innerHTML和innerText的区别。

①innerText不识别html标签是非标准，可读写元素里面的内容，读写时去除空格与换行

②innerHTML识别html标签是W3C标准，可读写元素里面的内容，读写时保留空格与换行。

2、操作常见元素属性：

img可修改元素有title、src、alt。

input可修改元素type、value、checked、selected、disabled。

<body>
    <img src="img/1641115576293.jpeg">
    <button>按钮</button>
    <input type="text" value="这是个input">
    <script>
        var img = document.querySelector('img');
        var button = document.querySelector('button');
        var input = document.querySelector('input');
        img.src = 'img/qq.jpeg';
        button.onclick = function () {
            input.value = '改变一下文字';
            // this指向的是时间函数的调用者 button，等同于button.disabled=true
            this.disabled=true;
        }
    </script>
</body>

3、操作元素样式属性：

修改元素的大小、颜色、位置等样式。

element.style 行内样式操作

<head>
    <style>
        .div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box{
            display: block;
            position: relative;
            
        }
        .close{
            cursor: pointer;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="div"></div>
        <i class="close">×</i>
    </div>
    <script>
        var box = document.querySelector('.box');
        var btn = document.querySelector('.close')
        btn.onclick = function () {
            // 驼峰命名法
            box.style.display = 'none';
        }
    </script>
</body>

精灵图遍历。

<head>
    <style>
        .bx{
            width: 500px;
            margin: 0 auto;
        }
        ul{
            list-style: none;
        }
        ul>li{
            width: 100px;
            height: 100px;
            margin: 10px;
            float: left;
            background: url(img\contact_icons.png) no-repeat;
        }
    </style>
</head>
<body>
    <div class="bx">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var imgs=document.querySelectorAll('li');
        for(var i=0;i<imgs.length;i++){
            var index=i*50;
            imgs[i].style.backgroundPosition='0 -'+index+'px';
        }
    </script>
</body>

显示隐藏文本框内容。

<head>
    <style>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="搜索">
    <script>
        var text = document.querySelector('input')
        // 得到焦点
        text.onfocus = function () {
            if (this.value === '搜索') {
                this.value = '';
            }
            this.style.color = '#333';
        }
        // 失去焦点
        text.onblur = function () {
            if (this.value === '') {
                this.value = '搜索'
            }
            this.style.color = '#999';
        }
    </script>
</body>

element.className 类名样式操作。

通过修改元素的className更改元素样式，适用于样式较多或者功能复杂的情况，使用className后会覆盖掉原来的类名。

如果要保留原来的类名可使用多类名选择器。

<head>
    <style>
        div {
            background-color: pink;
        }

        .box {
            width: 200px;
            height: 200px;
        }

        .change {
            margin-top: 50px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div class="box">这是一个div</div>
    <script>
        var test = document.querySelector('div')
        test.onclick = function () {
            this.className = 'box change'
        }
    </script>
</body>