时间戳

首页 > 解决方案 > Javascript - 使用下拉菜单动态更改标题的 h 标签

javascript - Javascript - 使用下拉菜单动态更改标题的 h 标签

问题描述

所以我不确定从哪里开始使用这个编码。我正在寻找使用带有 h 标签的下拉菜单，h1、h2、h3 等......然后使用 javascript 动态更改标题 h 标签。因此，如果默认情况下是 h1，那么我使用下拉菜单并将其更改为 h3，然后它将标题的 h 标签从 h1 更改为 h3。

所以我在想可能是给标题一个id，用那个id定位它，然后每个下拉列表都有一个数值，也许使用javascript子字符串并将h1中的数值替换为下拉列表中的数值以动态更改标题 h 标签。

所以我不确定我是否只是让这种方式比它需要的更复杂。有没有人尝试过这个或得到任何指示？

如果我不清楚我想要做什么，请告诉我。

谢谢。

标签： javascripthtml

解决方案

您可以在创建与前一个相同的克隆元素的元素上侦听change事件，只是使用不同的标签名称，并将创建的元素的分配给原始标题元素的。selectinnerHTMLouterHTMLouterHTML

s.addEventListener('change', function() {
  title.outerHTML = Object.assign(document.createElement(this.value), {id: 'title', innerHTML: title.innerHTML}).outerHTML;
})
<select id="s">
  <option value="h1">h1</option>
  <option value="h2">h2</option>
  <option value="h3">h3</option>
  <option value="h4">h4</option>
  <option value="h5">h5</option>
  <option value="h6">h6</option>
</select>

<h1 id="title">Title</h1>

推荐阅读