Javascript - 使用下拉菜單動態更改標題的 h 標簽

Question

所以我不確定從哪里開始使用這個編碼。 我希望使用帶有 h 標簽的下拉菜單，h1、h2、h3 等...然后使用 javascript 動態更改標題 h 標簽。 因此，如果默認情況下是 h1，那么我使用下拉菜單並將其更改為 h3，然后它將標題的 h 標簽從 h1 更改為 h3。

所以我在想，也許給標題一個 id，以該 id 為目標，然后每個下拉列表將有一個數值，也許使用 javascript 子字符串並將 h1 中的數值替換為下拉列表中的數值到動態更改標題 h 標簽。

所以我不確定我是否只是讓這種方式比它需要的更復雜。 有沒有人以前試過這個或得到任何指示？

如果我不清楚我要做什么，請告訴我。

謝謝。

Answer 1

你可以聽的change一個事件select創建具有相同克隆元素元素innerHTML與前一個，只是用不同的標記名稱，並指定outerHTML創建的元件到outerHTML原題元素。

 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>

Answer 2

我想到的最簡單的方法就是根據這些默認 CSS 設置（向下滾動頁面的大約三分之一）創建您自己的 H1、H2 類。 然后你可以像在這個小提琴中一樣動態改變它們： https : //jsfiddle.net/9yd8epso/

html：

<html>
  <body>
    <div>This is my title:</div>
      <div class="default" id="myTitle">Hello World</div>      
      <div>Please choose style: <select onchange="doChange(this)">
        <option>default</option>
        <option>h1</option>
        <option>h2</option>
      </select></div>
  </body>
</html>

javascript:

function doChange(e){
  document.getElementById("myTitle").className=e.value;
}

Javascript - 使用下拉菜單動態更改標題的 h 標簽

問題描述

2 個解決方案

解決方案1
1 已采納 2021-07-23 16:37:55

解決方案2
0 2021-07-23 16:46:00

Javascript - 使用下拉菜單動態更改標題的 h 標簽

問題描述

2 個解決方案

解決方案1 1 已采納 2021-07-23 16:37:55

解決方案2 0 2021-07-23 16:46:00

解決方案1
1 已采納 2021-07-23 16:37:55

解決方案2
0 2021-07-23 16:46:00