JavaScript_04_文档对象模型_04_改变HTML元素属性值

抚水青遥

于 2023-08-12 10:18:27 发布

阅读量71

点赞数

分类专栏： JavaScript 文章标签： javascript html 文档对象模型元素属性值

本文链接：https://blog.csdn.net/weixin_42548459/article/details/132245258

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript通过`innerHTML`修改HTML内容，`getAttribute`和`setAttribute`修改元素属性，以及`style.property`修改CSS样式，以实例演示了在HTML文档中实现动态样式更改。

摘要由CSDN通过智能技术生成

4.4.1 修改HTML内容

修改HTML内容的最简单的方法是使用“innerHTML”属性。
修改HTML内容的语法格式：

document.getElementById(“标签id属性值”).innerHTML=新HTML

4.4.2 修改THML属性

修改HTML元素属性的语法格式：

document.getElementById(“标签id属性值”).attribute=新属性值

4.4.3 修改HTML样式

修改HTML元素样式的语法格式：
document.getElementById(“标签id属性值”).style.property=新样式

例如：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
</head> 
<body> 
<p id="p1">Hello World!</p> 
<p id="p2">Hello World!</p> 
<script> 
document.getElementById("p2").style.color="blue"; 
document.getElementById("p2").style.fontFamily="Arial"; 
document.getElementById("p2").style.fontSize="larger"; 
</script> 
<p>以上段落通过脚本修改。</p> 
</body> 
</html>