我正在處理一些簡單的問題作爲我的考試練習，但大多數問題沒有任何答案讓我檢查我是否不知道。有一個我真的不確定，所以我想我會在這裏檢查。現在的問題是：如何在點擊時更改h1點擊/使部分居中

假設我們有一個包含兩行的HTML文檔：

<Body> 
<H1 title = "When this is clicked, the section changes"> Title </ h1> 
<P id = "first" title = "When this is clicked, the title is centered"> First section: Original version. </ P> 
</ Body>

類型將改變這個頁面的外觀，這樣的代碼：當你點擊

• h1標題，該部分從「第一部分：原始版本」更改爲「第一部分：修改版本」。

•單擊該部分時，標題的位置發生變化並居中。

希望有人能幫助我學習這讓我有一個答案，如果類似的東西顯示出來對我的考試:)

來源

2017-06-03 In6ify

請先嚐試自己解決問題。如果您遇到困難，請在您的問題中包含代碼的相關部分，並附上對您的預期和實際行爲以及您可能獲得的任何錯誤消息的描述。 –

嗨，如果任何下面的答案已解決您的問題，請點擊複選標記考慮[接受它]（https://stackoverflow.com/help/someone-answers）。這向更廣泛的社區表明，您已經找到了解決方案，併爲答覆者和您自己提供了一些聲譽。 – Bhuwan

這是你在找什麼？

$(document).on("click", "h1", function() { 
 
    $(this).css("text-align", "center"); 
 
})

p, h1 { 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 title="When this is clicked, the section changes"> Title </h1> 
 
<p id="first" title="When this is clicked, the title is centered"> First section: Original version. </p>

來源

2017-06-03 15:16:55 Gerard

jQuery沒有在問題 –

正如其他人所說，你應該能夠找到在谷歌的一切。但是，來幫助你，這就是答案應該是什麼：

所有的

var heading = document.getElementsByTagName("h1")[0]; 
 
var section = document.getElementById("first"); 
 

 
heading.addEventListener("click", function() { 
 
    section.innerText = "First section: modified version"; 
 
}); 
 

 
section.addEventListener("click", function() { 
 
    heading.setAttribute("style", "text-align: center"); 
 
});

<h1 title="When this is clicked, the section changes">Title</h1> 
 
<p id="first" title="When this is clicked, the title is centered">First section: Original version.</p>

來源

2017-06-03 15:24:39

中提及，感謝您抽出時間！ – In6ify

@ In6ify沒問題，樂於幫忙！請點擊此答案旁邊的複選標記以將您的問題標記爲已解決:) –

var h1 = document.querySelector('h1'); 
var first = document.querySelector('#first'); 

h1.addEventListener('click', function() { 
    first.innerText = 'First section: modified version.'; 
}); 

first.addEventListener('click', function() { 
    h1.style.textAlign = 'center'; 
});

來源

2017-06-03 15:29:14

首先請更正html標記標準和添加一些JavaScript代碼。檢查下面的代碼片段：

$(document).on('click', 'h1', function(){ 
 
    $('#first').text('First section: Modified version.'); 
 
}); 
 
$(document).on('click', '#first', function(){ 
 
    $('h1').css('text-align','center'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<h1 title = "When this is clicked, the section changes"> Title </h1> 
 
<P id = "first" title = "When this is clicked, the title is centered"> First section: Original version. </ P> 
 
</body>

來源

2017-06-03 15:33:46 Bhuwan

它不是我的html，只是從本書中複製而來！但謝謝:) – In6ify

我真的不知道爲什麼你會在這裏被downvoted。從我收集你已經盡你所能的所有分配的問題，這一次碰巧你...

反正..這個問題有幾個不同的問題，需要解決您的問題，以完成問題。我將嘗試將這些內容分解成組件，然後解釋幫助我們達到想要的位置的部分。

問題1

想通過這一點，下面的步驟來解決你的問題。

找到一種方法在<h1>元素上「聆聽」「點擊事件」。
找到一種方法，在單擊<h1>元素時，將<p>元素中的文本更改爲所需的文本。

這裏有一些子步驟，但這應該讓我們開始。

要解決此問題，我們需要找到一種方法來選擇頁面上的元素。谷歌搜索產生一些方法來完成基於你所提供的代碼的香草JS。

查詢選擇器：document.querySelector和document.querySelectorAll
標籤選擇：document.getElementsByTagName

還有一些其他的方面，但只使用您提供的代碼，並假設我們不可以要添加類屬性或任何東西，我們將滾動上述選擇。

首先選擇器從頁面返回HTML「節點」。您可以將HTML節點視爲組成HTML頁面的對象。他們有各種各樣的屬性，我們可以對它們執行許多操作。

最好的辦法是使用第一個建議document.querySelector，因爲它會根據傳遞的選擇器返回單個HTML節點。但要小心。如果我們有不止一個相同的元素，它只會返回第一個沒用的第一個元素。

這裏有一些你可以閱讀的文檔和幾個例子來幫助你理解它是如何工作的。

document.querySelector documentation

所以現在我們在頁面上選擇<h1>元素的一種方式。

document.querySelector(h1);

現在，我們需要一種方法來監聽事件。搜索「在香草JS中監聽事件」會帶給你addEventListener方法，它允許我們監聽給定HTML元素上的事件。現在

eventListener documentation

我們可以把這兩個在一起，我們有一個<h1>元素監聽事件。我會略過一點，然後填入我們的功能。

let title = document.querySelector('h1'); 

title.addEventListener('click', function() { 
    alert('I just clicked the title'); 
});

如果您插入並點擊標題，您將看到一個模式彈出窗口，指示您單擊標題。一步下來。

現在，我們必須找到一種方法將<p>元素的「文本內容」更改爲所需的文本。爲此，我們首先需要選擇<p>元素並將其存儲在一個變量中。你現在知道如何做到這一點，所以我會留給你的。

現在我們已經引用了要修改的節點，我們需要更改與該文本相關的該節點的屬性。谷歌搜索這將返回一些不同的屬性，但我會推動你在正確的方向，讓你知道你想elem.textContent財產。

把這一切放在一起，這裏是我的工作代碼，並滿足您對第一個問題的要求。

let headerTxt = document.querySelector('h1'); 
let sectionTxt = document.querySelector('p'); 

headerTxt.addEventListener('click', function() { 
    sectionTxt.textContent = 'First section: modified version'; 
});

問題2

從這裏的第一個問題有一些相似之處。我們需要......

同時選擇頁面（DONE）
添加click事件偵聽到該中心的<h1>元素<p>元素的<h1>和<p>元素。

我們可以跳過第一個問題，因爲我們是在問題1中做的。我也跳過將事件監聽器添加到<p>，因爲我們做了類似於第一個問題的東西。

添加事件偵聽器後，我們需要一種方法來更改HTML元素中某些文本的文本對齊方式。

Google搜索爲我們帶來了textAlign我們可以使用JS修改的CSS屬性。

textAlign

把所有這些組合起來，這裏的完整的解決方案

let headerTxt = document.querySelector('h1'); 
 
let sectionTxt = document.querySelector('p'); 
 

 
headerTxt.addEventListener('click', function() { 
 
    sectionTxt.textContent = 'First section: modified version'; 
 
}); 
 

 
sectionTxt.addEventListener('click', function() { 
 
    headerTxt.style.textAlign = 'center'; 
 
});

<body> 
 
<h1 title = "When this is clicked, the section changes"> Title </h1> 
 
<p id = "first" title = "When this is clicked, the title is centered"> First section: Original version. </p> 
 
</body>

希望這有助於人。我爲你提供的建議之一就是習慣於搜索並習慣閱讀文檔。我也是一名初學者，我很快就明白了這一點。

祝你好運！

來源

2017-06-03 16:09:29

如何在點擊時更改h1點擊/使部分居中

回答

問題1

問題2

把所有這些組合起來，這裏的完整的解決方案

相關問題