Question

我正在开发一个文本字体游戏，用户猜测屏幕上显示的字体，但是当我尝试比较单击的文本的style.familyFont和相应的数组元素字体时会出现问题。

在进行一些测试之后，只有当style.familyFont包含一个包含空格的字体时，才会比较style.familyFont ===对应的数组元素时控制台打印出false。显示比较的控制台示例：

Courier New ==“Courier New”false

Times New Roman ==“Times New Roman”false

Arial == Arial true

Calibri == Calibri true

Papyrus == Papyrus true

Tahoma == Tahoma true

通过控制台判断，当代码分配pickedOption = this.style.fontFamily时，pickedOption获取包含空格的字体的字符引号，因此比较结果为false。

我有办法处理这个问题吗？

var fonts = ["Arial", "Calibri", "Tahoma", "Papyrus", "Times New Roman", "Courier New"];
var options = document.querySelectorAll(".option");
var winningFont = generateWinningFont();
var fontDisplay = document.getElementById("fontDisplay");
var reset = document.getElementById("reset");
var message = document.getElementById("message");
fontDisplay.textContent = "Fargo";
fontDisplay.style.fontFamily = fonts[winningFont];
console.log(fonts[winningFont]);
console.log(winningFont);
setupOptions();

function generateWinningFont()
{
	return Math.floor(Math.random() * fonts.length);
}

reset.addEventListener("click", function()
{
	winningFont = generateWinningFont();
	fontDisplay.textContent = "Fargo";
	fontDisplay.style.fontFamily = fonts[winningFont];
	setupOptions();
});

function setupOptions()
{
	for(var i = 0; i < options.length; i++)
	{
		options[i].style.fontFamily = fonts[i];
		options[i].textContent = fonts[i];
		options[i].addEventListener("click", function(){
			var pickedOption = this.style.fontFamily;
			console.log(pickedOption);
			console.log(pickedOption == fonts[winningFont]);
			if(pickedOption == fonts[winningFont])
			{
				message.textContent = "Correct!";
			}
			else 
			{
				message.textContent = "Try Again!";
			}
		});
	}
}

<!DOCTYPE html>
<html>
<head>
	<title>Text Font Game</title>
</head>
<body>
	<h1>The Great 
		<br>
		<span id="fontDisplay"></span> 
		<br>
		Text Font Game
	</h1>
	
	<div id="stripe">
		<button id="reset">New Font</button>
		<span id="message"></span>
		<button class="mode">Easy</button>
		<button class="mode selected">Hard</button>
	</div>

	<div id="container">
		<div class="option"></div>
		<div class="option"></div>
		<div class="option"></div>
		<div class="option"></div>
		<div class="option"></div>
		<div class="option"></div>
	</div>

	<script type="text/javascript" src="textGame.js"></script>
</body>
</html>

Answer 1

没有测试你的代码，但是通过查看它，我发现这里可能存在一些问题。

您正在使用element.style.fontFamily来获取未由js应用的样式，因此您是我100％确定获取空字符串
您使用'=='代替'===' - 这样您就会检查值和值类型

至于第一个问题。你应该使用：

window.getComputedStyle(element, null).getPropertyValue('fontFamily')

这样你实际上得到了css应用的样式。或者您可以使用仍然使用.style.fontFamily但是您必须通过JS的内联样式设置字体系列，这是相同的。

docs - ＆gt; https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

比较数组元素和style.fontFamily

1 个答案: