JavaScript来操作HTML元素

最新推荐文章于 2024-06-09 20:17:27 发布

有人给我介绍对象吗

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量363

点赞数 8

分类专栏： # JS 文章标签： javascript html 开发语言

本文链接：https://blog.csdn.net/weixin_50993868/article/details/134728257

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

以下是一个完整的示例，演示如何使用JavaScript来操作HTML元素：

HTML：

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="myElement">Hello, World!</div>
  <button id="myButton">Change Style</button>

  <script src="script.js"></script>
</body>
</html>

JavaScript（script.js）：

// 获取元素节点
const myElement = document.getElementById('myElement');
const myButton = document.getElementById('myButton');

// 修改元素的文本内容
myElement.innerText = 'Hello, JavaScript!';

// 绑定点击事件处理函数
myButton.addEventListener('click', function(event) {
  // 修改元素的样式
  myElement.style.color = 'red';
  myElement.style.fontSize = '20px';

  // 添加CSS类
  myElement.classList.add('highlight');
});

在上面的示例中，JavaScript代码会在页面加载时执行。首先，使用getElementById()方法获取myElement和myButton元素节点。然后，使用innerText属性修改myElement元素的文本内容。

接下来，通过addEventListener()方法为myButton按钮元素绑定了一个点击事件处理函数。当按钮被点击时，该函数会执行，修改myElement元素的样式属性（颜色和字体大小），并通过classList.add()方法添加highlight CSS类。

通过这个完整的例子，你可以了解如何使用JavaScript来操作HTML元素，修改元素的文本内容和样式属性，以及如何绑定事件处理函数。这样，当页面加载时，JavaScript代码会自动执行相应的操作，实现动态地修改和操纵HTML元素的效果。

有人给我介绍对象吗

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaScript来操作HTML元素

通过这个完整的例子，你可以了解如何使用JavaScript来操作HTML元素，修改元素的文本内容和样式属性，以及如何绑定事件处理函数。这样，当页面加载时，JavaScript代码会自动执行相应的操作，实现动态地修改和操纵HTML元素的效果。在上面的示例中，JavaScript代码会在页面加载时执行。按钮元素绑定了一个点击事件处理函数。当按钮被点击时，该函数会执行，修改。元素的样式属性（颜色和字体大小），并通过。
复制链接

扫一扫