Question

我正在从事一个学校项目，我需要一些帮助。我打算制作一个下拉菜单，允许用户更改他们正在阅读的文本的字体大小，字体类型和背景颜色。我的问题是我无法运行我的功能。我对此很陌生，所以我不知道问题是我试图如何调用它，或者我的功能是否有缺陷。

<!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>

我这里只有font-size的功能，但我想它们对所有这些都是一样的。英语不是我的第一语言，但我希望我已经足够清楚了。任何帮助将不胜感激。

Answer 1

您的代码很好但是您有一些语法错误。

您必须写id="tekst"而不是id=tekst
font-size不是javascript中的有效标识符（因为-），因此您必须使用数组表示法来访问它。

这是一个有效的例子：

＆＃13;

<!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>

＆＃13;

Answer 2

以下是如何在下拉列表中调用change事件。

DataTable tblStudents = dataSet.Tables["Students"];
DataRow addedRow = tblStudents.Rows.Add();
DataTable tblAddedRows = tblStudents.GetChanges(DataRowState.Added);
addedRow.SetField("ID", -1 * tblAddedRows.Rows.Count);

// other columns...

$(document).on('change', 'select', function(){
  alert($(this).find('option:selected').text());
});

如何从下拉菜单

2 个答案: