JavaScript----操作元素

鹿蹊zz

已于 2022-06-30 16:01:42 修改

阅读量258

点赞数 6

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-06-28 20:34:31 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/125509242

版权

JavaScript 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

操作元素的步骤：
- 事件源：触发事件的元素（获取事件源）

- 事件类型：例如 click 点击事件（绑定事件）

- 事件处理程序：事件触发后要执行的代码(函数形式)，事件处理函数

一.改变元素内容（innerText 和 innerHTM）
innerText 和 innerHTML的区别

innerText 不识别html标准非标准去除空格和换行

<div></div>
  <p>
      我是文字
      <span>123</span>
  </p>

 var div = document.querySelector("div");
  div.innerText = "  <strong>今年是:</strong>2022";

div.innerHTML = "  <strong>今年是:</strong>2022";

二.修改元素属性

1.通过Element.style.属性改变元素宽度，高度，颜色，背景色等等

<style>
     div{
         width: 200px;
         height: 200px;
         border: 1px solid red;
     }
 
 </style>
</head>
<body>
    <div>123</div>
   <button>点击改变div属性</button>

// 获取事件源
        var div=document.querySelector("div");
        var btn=document.querySelector("button");
        // 事件类型
        btn.onclick=function(){
            // 事件处理程序
            div.style.backgroundColor="red";
            div.style.color="blue";
            div.style.width="300px";
 
        }

2.通过添加className类名来改变元素属性

上述方法一个，两个修改元素属性还可以，但是多个修改就有些繁琐，所以我们可以通过改变或添加元素className类名来改变元素样式

  // 获取事件源
        var div = document.querySelector("div");
        var btn = document.querySelector("button");
        // 事件类型
        btn.onclick = function () {
            // 事件处理程序 
            //2. 我们可以通过修改元素的className 更改样式 适用于样式较多或者功能复杂
            //3.如果想要保留原先的类名 我们可以这么做 多类名选择器
            // this.className="change";
            div.className = "frist change";
 
        }

鹿蹊zz

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript----操作元素

操作元素的步骤：- 事件源：触发事件的元素（获取事件源）- 事件类型：例如 click 点击事件（绑定事件）- 事件处理程序：事件触发后要执行的代码(函数形式)，事件处理函数一.改变元素内容（innerText 和 innerHTM）innerText 和 innerHTML的区别innerText 不识别html标准非标准去除空格和换行 1.通过Element.style.属性改变元素宽度，高度，颜色，背景色等等............
复制链接

扫一扫

专栏目录