我正在创建一个网站，您可以在其中阅读一些文本。文本本身在一页中。在其他设置中。我需要更改文本页面中的字体系列和其他选项。但是当我重定向到那里（/settings -> /text）时，所有更改都会被跳过。我应该做什么来修复它？
/* In settings.ejs */
<span id="fontFamily">
<i id="fontCh" class="fas fa-font"></i>
<p id="fontWord"> Шрифт</p>
</span>
/* In read.ejs */
<pre id="text"><%= text %></pre>
fonts = [
'Arial, Helvetica, sans-serif',
'"Times New Roman", Times, serif',
'"Courier New", Courier, monospace',
'monospace',
];
var i = 0;
document.getElementById('fontCh').addEventListener('click', () => {
i++;
if (i == fonts.length)
i = 0;
});
var font = fonts[i];
document.getElementById('text').style.fontFamily = font;
以上是我尝试过的。
UPD 我认为我们都没有正确理解彼此。我知道如何使用外部 css 文件。但我需要知道如何使用 javaScript 更改属性 font-family 以及最重要的是什么 - 确保重定向到其他页面时它不会跳过我的更改（它现在所做的）
您好@Vyacheslav Siniy，您可以使用外部CSS，因为您可以添加一个名为“style”的文件或任何您想要的带有扩展名.css（如style.css）的文件。在 head 标签中添加该文件路径，
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
在该 CSS 文件中使用您的字体代码，并在您想要的每个页面中调用该文件。我想这很容易。
遵循@Sandeep 的方法。使用外部样式表。在这里练习一下：https://www.w3schools.com/css/css_howto.asp
这是样式表的链接：外部样式表
打开网站所有页面使用的CSS文件，并在CSS中添加以下行
body, body *{
font-family: 'Arial' !important;
}
将 Arial 替换为您的字体名称。这将在整个网站上实现字体系列。
您似乎只是想在单击另一个元素时更改字体。
因此，您的原始代码存在问题。要单击的项目那里没有任何内容，因此没有任何可以用鼠标单击的内容。
此外，您的 JavaScript 正在更新字体索引，但更改字体的代码位于处理程序之外。
fonts = [
'Arial, Helvetica, sans-serif',
'"Times New Roman", Times, serif',
'"Courier New", Courier, monospace',
'monospace',
];
var i = 0;
document.getElementById('fontCh').addEventListener('click', () =>
{
i++;
if (i == fonts.length)
i = 0;
var font = fonts[i];
document.getElementById('text').style.fontFamily = font;
});<span id="fontFamily">
<i id="fontCh" class="fas fa-font">Click here to change font</i>
<p id="fontWord"> Шрифт</p>
</span>
<pre id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>var fonts = [
'Arial, Helvetica, sans-serif',
'"Times New Roman", Times, serif',
'"Courier New", Courier, monospace',
'monospace',
];
编辑
将您的 javascript 文件更改为：
// The following code will only execute when the page has loaded and is ready.
document.addEventListener('DOMContentLoaded', function()
{
var i = 0;
document.getElementById('fontCh').addEventListener('click', () =>
{
document.getElementById('textplace').style.fontFamily = fonts[i];
i++;
if (i == fonts.length)
i = 0;
});
}, false);
您的索引文件应如下所示。您以错误的方式引用您的文件。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="public/css/style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
</head>
<body>
<div id="mySidenav" class="sidenav">
<span id="read" onclick="onReadClick()"><i class="fas fa-book-open" aria-hidden="true"></i></span>
<span id="upload" onclick="onUploadClick()"><i class="fas fa-upload" aria-hidden="true"></i></span>
<span><i class="fas fa-upload" id="fontCh" aria-hidden="true"></i></span>
<span id="cogs" onclick="onCogsClick()"><i class="fas fa-cogs" aria-hidden="true"></i></span>
</div>
<main id="main">
<div id="for_reading">
<h2>Читай <i class="fas fa-book-open" aria-hidden="true"></i></h2>
<div id="textplace" style="font-family: Arial, Helvetica, sans-serif;">
<p id="content"> ADD YOUR CONTENT HERE</p>
</div>
</div>
<div id="for_uploading">
<h2>Загрузи <i class="fas fa-upload" aria-hidden="true"></i></h2>
<p>Загрузи, что хочешь, и читай на здоровье.</p>
<form action="fileupload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" id="file" class="inputfile" onchange="fileAdded()">
<label for="file">
<i class="fas fa-upload" aria-hidden="true"></i>
<span id="output">Выбери файл.</span>
</label>
<input type="submit" value="Upload">
</form>
</div>
<div id="for_settings">
</div>
</main>
<script src="public/js/javascript.js"></script>
</body>
</html>
您还有其他一些问题。您有涉及颜色（小麦/白色等）的代码和不起作用的文件上传器。你最好先完成一件事，然后再继续下一件事。
您可以添加代码以在输出中显示字体名称吗？