我的WebAPI学习（二）------ 操作元素

技术2025-09-12 85

文章目录

操作元素前言区别设置属性的值表单元素的属性操作样式属性操作方式1：通过操作style属性方式2：通过操作className属性

操作元素

前言

// 从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉 element.innerText // 从起始位置到终止位置的内容,包括html标签，同时空格和换行会保留 element.innerHtml

区别

innerText 不识别html标签非标准去除空格和换行innerHTML 识别html标签 W3C标准保留空格和换行的

设置属性的值

元素对象.属性名 = 值

<body> <button id="wza">为之奥</button> <button id="xxy">下新与</button> <br> <img src="images/wza.jpg" alt="" title="为之奥"> <script> var ldh = document.getElementById('wza'); var img = document.querySelector('img'); zxy.onclick = function() { img.src = 'images/zxy.jpg'; img.title = '张学友思密达'; } </script> </body>

表单元素的属性操作

利用DOM可以操作如下表单元素的属性： type、value、checked、selected、disabled

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

常用方式： 1.element.style 行内样式操作 2.element.className 类名样式操作

注意:JS 修改style 样式操作，产生的是行内样式，CSS权重比较高

方式1：通过操作style属性

元素对象的style属性也是一个对象！

元素对象.style.样式属性 = 值;

<body> <div></div> <script> // 1. 获取元素 var div = document.querySelector('div'); // 2. 注册事件处理程序 div.onclick = function() { // div.style里面的属性采取驼峰命名法 this.style.backgroundColor = 'purple'; this.style.width = '250px'; } </script> </body>

方式2：通过操作className属性

元素对象.className = 值;

因为class是关键字，所有使用className。

Processed: 0.018, SQL: 9