Javascript 如何在单击时更改h1标题/使节居中_Javascript_Html_Css

Javascript 如何在单击时更改h1标题/使节居中

javascript html css

Javascript 如何在单击时更改h1标题/使节居中,javascript,html,css,Javascript,Html,Css,我正在做一些简单的问题作为考试的练习，但是如果我不知道，大多数问题都没有答案供我检查。有一个我真的不确定，所以我想我应该在这里查一下。问题是: 假设我们有一个包含以下两行的HTML文档： <Body> <H1 title = "When this is clicked, the section changes"> Title </ h1> <P id = "first" title = "When this is clicked, the title

我正在做一些简单的问题作为考试的练习，但是如果我不知道，大多数问题都没有答案供我检查。有一个我真的不确定，所以我想我应该在这里查一下。问题是:

假设我们有一个包含以下两行的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标题时，该部分从“第一部分：原始版本”更改为“第一部分：修改版本”

•单击该部分时，标题的位置会发生变化并居中

希望有人能帮助我了解这一点，这样，如果我的考试中出现类似的情况，我会有一个答案：）

这就是你想要的吗

$（文档）。在（“单击”，“h1”，函数（）上）{
$（this.css（“文本对齐”、“居中”）；
})

p，h1{
文本对齐：左对齐；
}


标题
第一部分：原始版本

正如其他人提到的，你应该能够在谷歌上找到所有东西。但为了帮助你，答案应该是：

var heading=document.getElementsByTagName（“h1”）[0]；
var section=document.getElementById（“第一”）；
heading.addEventListener（“单击”，函数（）{
section.innerText=“第一节：修改版本”；
});
节.addEventListener（“单击”，函数（）{
heading.setAttribute（“样式”，“文本对齐：居中”）；
});
标题
第一部分：原始版本。
首先，请将您的html
标记更正为标准，并添加一些javascript代码。检查以下代码段：

$（文档）。在（'click'，'h1'，function（）上{
$（“#first”）.text（'first section:Modified version'）；
});
$（文档）。在（'单击'，'首先'，函数（）上）{
$（'h1'）.css（'text-align'，'center'）；
});

标题
第一部分：原始版本。
我真的不知道你为什么在这里被否决。据我所知，你在所有指定的问题上都尽了最大的努力，而这一个碰巧难倒了你
无论如何。。这个问题有几个不同的问题需要解决，你才能完成这个问题。我将试着把这些分解成几个部分，然后解释一下帮助我们到达你想要的地方的各个部分
问题1
仔细考虑一下，以下是解决问题的步骤
找到一种方法“侦听”元素上的“单击事件”
当单击
元素时，找到将
元素中的文本更改为所需文本的方法
这里面有一些子步骤，但这应该让我们开始
为了解决这个问题，我们需要找到一种在页面上选择元素的方法。Google搜索会根据您给出的代码，在vanilla JS中生成一些方法来实现这一点

查询选择器：document.querySelector
和document.queryselectoral
标记选择器：document.getElementsByTagName

还有很多其他的，但是只使用您提供的代码，并且假设我们不允许添加类属性或任何东西，我们将使用上面的选择
选择器首先从页面返回HTML“节点”。可以将HTML节点视为组成HTML页面的对象。它们有各种各样的属性，我们可以对它们执行许多操作
最好使用第一个建议，document.querySelector
，因为它基于传递的选择器返回单个HTML节点。不过要小心。如果同一个元素中有多个元素，那么它只会返回第一个元素，而第一个元素根本没有用处
这里有一些您可以阅读的文档和一些示例来帮助您理解它是如何工作的

现在我们有了一种在页面上选择
元素的方法
document.querySelector（h1）
现在，我们需要一种倾听事件的方式。搜索“在vanilla JS中侦听事件”将找到addEventListener方法，该方法允许我们侦听给定HTML元素上的事件

现在我们可以把这两个元素放在一起，我们有一个监听事件的
元素。我将向前跳一点，然后填充函数，这样我们就有了
let title = document.querySelector('h1');

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

如果您将其插入并单击标题，您将看到一个模式弹出窗口，指示您单击了标题。退一步
现在，我们必须找到一种方法将
元素的“文本内容”更改为所需的文本。为此，我们首先需要选择
元素并将其存储在变量中。你现在知道怎么做了，所以我让你去做
现在我们有了要修改的节点的引用，我们需要更改该节点与文本相关的属性。谷歌搜索它会返回一些不同的属性，但我会告诉你正确的方向，让你知道你想要elem.textContent
属性
总而言之，下面是我的代码，它可以满足您对第一个问题的要求。
let headerTxt = document.querySelector('h1');
let sectionTxt = document.querySelector('p');

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

问题2
这里的第一个问题有一些相似之处。我们需要
选择页面上的
和
元素（完成）
将单击事件侦听器添加到将
元素居中的
元素
我们可以跳过第一部分，因为我们在问题1中做了。我还将跳过添加事件列表
let headerTxt = document.querySelector('h1');
let sectionTxt = document.querySelector('p');

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