【JavaScript】事件

最新推荐文章于 2024-09-09 09:35:48 发布

黑城笑

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量1.2k

点赞数 1

分类专栏： # JavaScript 文章标签： JavaScript HTML内容事件处理 innerHTML 函数调用

本文链接：https://blog.csdn.net/qq_49893586/article/details/124418533

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【JavaScript】事件

介绍
更改HTML的内容
更改自身元素
通过调用函数来更改HTML内容

介绍

HTML事件是发生在HTML上的事情
当运行时，js可以应付这些事件

对字段进行修改
点击按钮
加载网页

更改HTML的内容

通过点击按钮，我们将会把变量name的内容进行修改

<!DOCTYPE html>
<html>
<body>

<h1>更改HTML的内容</h1>

<button onclick="document.getElementById('name').innerHTML='黑城笑'">我的名字是：</button>

<p id="name"></p>

</body>
</html>

更改自身元素

除了可以更改HTML内容外，js还可以对自身元素进行修改

<!DOCTYPE html>
<html>
<body>

<h1>更改自身内容</h1>

<button onclick="this.innerHTML='我是黑城笑'">我的名字是</button>

</body>
</html>

通过调用函数来更改HTML内容

我们最通常使用的其实是事件属性调用函数

<!DOCTYPE html>
<html>
<body>

<h1>通过调用函数来更改HTML内容</h1>

<p>点击按钮调用函数来显示HTML内容</p>

<button onclick="myName()">我的名字是：</button>

<script>
function myName() {
    document.getElementById("name").innerHTML = '黑城笑';
}
</script>

<p id="name"></p>

</body>
</html>