我正在处理一些简单的问题作为我的考试练习，但大多数问题没有任何答案让我检查我是否不知道。有一个我真的不确定，所以我想我会在这里检查。现在的问题是：如何在点击时更改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

把所有这些组合起来，这里的完整的解决方案

相关问题