我正在做一个学校元素，我需要一些帮助。我应该制作一个下拉菜单，允许用户更改他们正在阅读的文本的字体大小、字体类型和背景颜色。我的问题是我无法运行我的函数。我对此很陌生，所以我不知道问题是我如何尝试调用它还是我的功能有缺陷。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dropdownmeny.css">
<h1>Javascript</h1>
</head>
<body>
<p></p>
<nav>
<ul>
<li><a href="#">Font-size</a>
<ul>
<li><a href="#" onclick="liten()">15px</a></li>
<li><a href="#" onclick="medium()">20px</a></li>
<li><a href="#" onclick="stor()">25px</a>
</ul>
</li>
<li><a href="#">Font-type</a>
<ul>
<li><a href="#">Verdana</a></li>
<li><a href="#">Times New Roman</a></li>
<li><a href="#">Arial</a></li>
</ul>
</li>
<li><a href="#">Bakgrunnsfarge</a>
<ul>
<li><a href="#">Rosa</a></li>
<li><a href="#">Turkis</a></li>
<li><a href="#">Gul</a></li>
</ul>
</li>
</ul>
</nav>
<p id=tekst style="background-color:pink; font-size: 15px; font-family: verdana">This text should change</p>
<script>function liten() {document.getElementById("tekst").style.font-size = "15px"; }</script>
<script>function medium() {document.getElementById("tekst").style.font-size = "20px"; }</script>
<script>function stor() {document.getElementById("tekst").style.font-size = "25px"; }</script>
</body>
</html>
我这里只有字体大小的函数，但我想它们对所有函数都是一样的。英语不是我的第一语言，但我希望我已经足够清楚了。任何帮助将不胜感激。
最佳答案
您的代码很好，但有一些语法错误。
您必须编写
id="tekst"而不是id=tekstfont-size不是 javascript 中的有效标识符(因为-)，因此您必须使用数组符号来访问它。
这是一个工作示例:
<!DOCTYPE html>
<html>
<head>
<h1>Javascript</h1>
</head>
<body>
<p></p>
<nav>
<ul>
<li><a href="#">Font-size</a>
<ul>
<li><a href="#" onclick="liten()">15px</a></li>
<li><a href="#" onclick="medium()">20px</a></li>
<li><a href="#" onclick="stor()">25px</a>
</ul>
</li>
<li><a href="#">Font-type</a>
<ul>
<li><a href="#">Verdana</a></li>
<li><a href="#">Times New Roman</a></li>
<li><a href="#">Arial</a></li>
</ul>
</li>
<li><a href="#">Bakgrunnsfarge</a>
<ul>
<li><a href="#">Rosa</a></li>
<li><a href="#">Turkis</a></li>
<li><a href="#">Gul</a></li>
</ul>
</li>
</ul>
</nav>
<p id="tekst" style="background-color:pink; font-size: 15px; font-family: verdana">This text should change</p>
<script>function liten() {document.getElementById("tekst").style['font-size'] = "15px"; }</script>
<script>function medium() {document.getElementById("tekst").style['font-size'] = "20px"; }</script>
<script>function stor() {document.getElementById("tekst").style['font-size'] = "25px"; }</script>
</body>
</html>关于javascript - 如何从下拉菜单中调用 JavaScript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32991920/