innerHTML属性

innerHTML属性：用于设置或获取HTML 元素中的内容。

样例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p id="one"><span>这是一个段落</span></p><script>let obj = document.getElementById('one'); // 获取id=one的p标签console.log(obj.innerHTML);                  // 显示内容：<span>这是一个段落</span>obj.innerHTML = '<span>hello world!</span>';  // 修改内容为： hello world!</script></body>
</html>

效果截图：

innerText属性

innerText属性：用于设置或获取HTML 元素中的纯文本。

样例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p id="one"><span>这是一个段落</span></p><script>let obj = document.getElementById('one');console.log(obj.innerText);    // 显示文本内容 “这是一个段落”obj.innerText = 'hello world!'; //修改文本内容</script></body>
</html>

效果截图：

className属性

className属性：用于设置或获取DOM对象的类样式。

样例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="one" class="first"></div><script>let obj = document.getElementById('one');console.log(obj.className);                // 修改前 firstobj.className = 'two';console.log(obj.className);                // 修改后 two</script></body>
</html>

效果截图：

style属性

style属性：用于设置或获取DOM对象的style样式。

样例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="one">这是一个div</div><script>let obj = document.getElementById('one'); // 通过id获取divobj.style.width = '500px';                // 通过style修改各种属性obj.style.height = '300px';obj.style.backgroundColor = 'gray';obj.style.fontSize = '20px';obj.style.color = '#fff';obj.style.border = 'solid 5px red';obj.style.display = 'block';          //设置DOM对象的显示和隐藏</script></body>
</html>

效果截图：

写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]

加油！

共同努力！

Keafmd

DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）相关推荐

java中id name_关于DOM对象中的id与name的区别
例1: value="admin"> id="un" name="username" value="silas"& ...
DOM对象,节点,获取元素的非行间样式,元素的偏移量等属性词
获取页面中的元素的方法作用: 通过各种方式获取页面中的元素以前我们说过, id 可以直接使用这个方法只能通过 id 获取今天学的就是使用各种方式比如: id, 类名, 标签名, 选择器的方 ...
详解DOM对象中clientWidth、offsetWidth等属性
我们有时需要获得鼠标在某盒子中的位置,或者是随意移动某盒子的位置,在这些场景中我们可能经常需要用到clientWidth.offsetWidth.offsetTop啊等等.但是对于初学者来说(包括我) ...
java dom获取命名空间属性_java – 如何在XML DOM对象中添加命名空间前缀？
我正在尝试使用特定的命名空间来构建一个 XML文档.我想要生成的最终文档应该是这样的: token token token 这是我到目前为止. Document document = Document ...
JavaScript原生态获取DOM对象,获取属性值以及设置属性值
一.获取DOM对象(标签,元素,节点)的三种方法 1.document.getElementById(); 根据元素的id获取当前的标签例如 <p id="demo"& ...
JavaScript 的DOM对象
JavaScript 的DOM对象 1.DOM对象的概念 1.DOM:文档对象模型(Document Object Model) 2.document对象,是DOM中的顶级对象,封装了HTML的相关属 ...
JavaScript之DOM（中）
JavaScript之DOM(中) 1 排他操作 2 属性操作 2.1 获取属性值 2.2 设置属性值 2.3 移除属性值 3 自定义属性 3.1 设置属性值 3.2 获取属性值 4 节点基础 4.1 ...
php 赋值给 dom对象,详解PHP原生DOM对象操作XML的方法
详解PHP原生DOM对象操作XML的方法发布于 2017-08-08 20:15:29 | 80 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...
区分event对象中的[clientX,offsetX,screenX,pageX]
前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientX eve ...

DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）

DOM对象中的常用属性

innerHTML属性

innerText属性

className属性

style属性

DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）相关推荐

最新文章

热门文章