DOM 基础 ---------- 操作元素

卡卡西最近怎么样

已于 2022-02-10 15:54:32 修改

阅读量560

点赞数 15

分类专栏： JavaScript 零基础入门文章标签： html css3 前端 javascript 开发语言

于 2022-02-10 15:00:09 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/122856973

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章 43 订阅

订阅专栏

一：修改元素内容

修改元素内容有 innerText 和 innerHTML 两种方式，两者之间的区别在于是否可以识别 HTML 标签，innerText 不识别 HTML 标签，innerHTML 可以识别 HTML 标签

innerText：

（只是简单改变元素内容的话两者效果是一样的）

<body>

    <div>这里有一只小鸟</div>

    <script>

        var div1=document.querySelector('div');

        div1.onclick=function(){

            div1.innerText='其实是一只小狗';

        }

    </script>

</body>

结果为点击 ‘这里有一只小鸟’ 后元素内容会变成 ‘其实是一只小狗’

如果想在改变元素内容时增加操作，例如加一个 strong 标签，则 innerText 不会识别该 strong 标签，innerHTML 可以识别并产生效果

<body>

    <div>这里有一只小鸟</div>

    <script>

        var div1=document.querySelector('div');

        div1.onclick=function(){

            div1.innerText='<strong>其实是一只小狗</strong>';

        }

    </script>

</body>

innerText 不但不会识别HTML标签，还会将标签打印到页面中

如果是 innerHTML 则可以识别并产生实际效果

var div1=document.querySelector('div');

        div1.onclick=function(){

            div1.innerHTML='<strong>其实是一只小狗</strong>';

        }

二：修改元素属性

经常用于 src 属性，title 属性，href 属性等等，用法为 element.src=‘............’

<body>

     <img src="./登录/密码隐藏 (2).png" alt="" id="img1">

    <script>

        var img=document.getElementById('img1');

        var flag=0;

       img.onclick=function(){

               img.src="./登录/密码显示.png";

        }

    </script>

</body>

点击前：

点击后：

三：修改样式属性

我们利用 hover伪类选择器可以达到鼠标悬停变换样式的效果，下面将说明如何点击得到变换样式的效果

倒数第四行的 this 指向的是事件的调用者，即 div1，写成 div1.style.backgroundColor 效果相同

并且要注意更改后的产生的样式为行内样式！如果要使更改后产生的样式为类名样式属性，则格式为 element.className 。更改的样式属性为驼峰命名法，和css直接设置的样式不同

<style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgb(255, 158, 158);
        }
    </style>
</head>
<body>
    <div></div>
    <script>
       var div1=document.querySelector('div');
       div1.onclick=function(){
           this.style.backgroundColor="purple";
       }
    </script>
</body>

点击前：

点击后：

卡卡西最近怎么样

关注

15
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM 基础 ---------- 操作元素

一：修改元素内容修改元素内容有 innerText 和 innerHTML 两种方式，两者之间的区别在于是否可以识别 HTML 标签，innerText 不识别 HTML 标签，innerHTML 可以识别 HTML 标签innerText：
复制链接

扫一扫