[英]How to rename h1 text with javascript (on wordpress)
我想為任何單個頁面重命名 header 中的 h1 文本，是否可以使用腳本？
標題的行是：
像這樣
我包裝了一個頁面加載事件，然后使用最接近的已知選擇器
如果你有 class="titoloheader" 代碼比使用更簡單
div[data-row=middle] h1
如果您只想更改帶有/articoli/的頁面，您可以測試路徑名：
const url = new URL(location.href);
if (url.pathname.split("/").indexOf("articoli") !=-1) {
document.querySelector("h1.titoloheader").innerText = "Hello"
}
})
如果要更改 page-id-X，可以這樣做：
香草JS
const pageTitles = { "41": "Hello", "44": "Goodbye", "47": "Ciao", "3": "Arriverderci", "313": "Hey", "316": " Bye", "318": " This is silly", "50": "The end" }; const changeHeader = () => { let id = [...document.body.classList] // all the classes of the body tag.filter(classStr => classStr.startsWith("page-id")); // find the one that starts with page-id if (id.length)[, , id] = id[0].split("-") // if found (an array) grab the last part after last - if (id && Object.keys(pageTitles).includes(id)) { // do we find that ID in the list document.querySelector("h1.titoloheader").innerText = pageTitles[id]; // change the header } }; window.addEventListener("load", changeHeader); // when the page loads
<body class="home page-template-default page page-id-47 logged-in admin-bar no-customize-support ct-loading" data-link="type-1" data-forms="classic"> <div data-row="middle" data-columns="1"> <div class="ct-container"> <div data-column="middle"> <div data-items=""> <div class="ct-header-text " data-id="text"> <div class="entry-content"> <h1 class="titoloheader">Benvenuti</h1> </div> </div> </div> </div> </div> </div>
jQuery
const pageTitles = { "41": "Hello", "44": "Goodbye", "47": "Ciao", "3": "Arriverderci", "313": "Hey", "316": " Bye", "318": " This is silly", "50": "The end" }; const changeHeader = () => { let id = [...document.body.classList] // all the classes of the body tag.filter(classStr => classStr.startsWith("page-id")); // find the one that starts with page-id if (id.length)[, , id] = id[0].split("-") // if found (an array) grab the last part after last - if (id && Object.keys(pageTitles).includes(id)) { // do we find that ID in the list $("h1.titoloheader").text(pageTitles[id]); // change the header } }; $(document).ready(changeHeader);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body class="home page-template-default page page-id-47 logged-in admin-bar no-customize-support ct-loading" data-link="type-1" data-forms="classic"> <div data-row="middle" data-columns="1"> <div class="ct-container"> <div data-column="middle"> <div data-items=""> <div class="ct-header-text " data-id="text"> <div class="entry-content"> <h1 class="titoloheader">Benvenuti</h1> </div> </div> </div> </div> </div> </div>
jQuery：
$('#main-container div[data-row="middle"] .entry-content h1').html('Your New Title');
香草JS：
var el = document.querySelector("#main-container div[data-row="middle"] .entry-content h1");
el.innerHTML= "Your New Title";
要在頁面加載時更改示例中 h1 元素的文本，您可以使用：
window.addEventListener('load', event => {
const h1Element = document.querySelector("#main-container .entry-content h1");
h1Element.innerText = 'New H1 Text';
});
如果您不更改 window 加載事件回調中的 H1，則當您嘗試使用 document.querySelector 訪問它時，您的目標元素可能在 DOM 中不可用。
有時可以使用純CSS替換文本
在此處查看答案集合：
缺點：
優點：
這是W3學校的一個簡單例子
<!DOCTYPE HTML>
<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
如果您注意到，他們會在 h1 標簽中添加一個唯一的 id。 這樣您就可以直接訪問標簽。
如何替換/更改里面的標題文本<h1></h1> ，使用Javascript？
[英]How Do I Replace/Change The Heading Text Inside <h1></h1>, Using Javascript?
如何在一對標簽中輸入文字，例如“ <h1> 我的頭 </h1> ”，通過Javascript？
[英]How to the text within a pair of tags, like “my head” in “<h1>my head</h1>”, by Javascript?
如何使用 javascript 在我的富文本編輯器上啟用標題（h1、h2、h3、h4）？
[英]How to enable Heading (h1, h2, h3, h4) on my rich text editor using javascript?
我如何“創建一個<h1>元素並給它一個 ID，但不要在 JavaScript、select 中放入任何文本</h1><h1>元素並給它一些文本'</h1>
[英]How do I "Create an <h1> element and give it an ID, but don't put any text inside In JavaScript, select your <h1> element and give it some text'
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.