我有一個使用 Javascript 和 CSS 使用組合框更改文本樣式的測試。但是，我只是發現這個網站的字體類型發生了變化，我從谷歌那里什么也沒得到。這是我的代碼：var changeFont = function(font) { console.log(font.value) document.getElementById("output-text").style.fontFamily = font.value;}.tebal { font-family: Verdana; font-size: 12px; color: blue; font-weight: bold;}.miring { font-family: Verdana; font-size: 12px; color: blue; font-weight: italic;}<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="windows-1252"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script><script src="http://code.jquery.com/jquery-git2.js"></script><div class="jumbotron text-center"> <h3>Text Style Changed with combobox</h3></div><div class="text-center" id="output-text"> Hello Guys</div><div class="text-center"> <select id="input-font" class="input" onchange="changeFont (this);"> <option value="Times New Roman" selected="selected">Times New Roman</option> <option value="Arial">Arial</option> <option value="algerian">Algerian</option> <option value="berlin sans fb">Berlin Sans FB</option> <option value="bold" class="bold">Tebal</option> <option value="miring" class="miring">Miring</option> <option value="" class="">Style1</option> <option value="" class="">Style2</option> <option value="" class="">Style3</option> </select></div>我想讓它像這樣（照片）， 每次我從組合框更改樣式，樣式文本都會更改，但我找不到如何制作它的示例以及我的代碼有什么問題。請幫我解決這個代碼:(，謝謝。注意：這是我的照片的翻譯 - ini 文本 berubah sesuai css = 此文本根據 css 進行更改 - tebal = 粗體 - Miring = 斜體 - bingkai = 框架
3 回答
胡子哥哥
TA貢獻1825條經驗 獲得超6個贊
我認為為每種字體定義類會更簡單。然后將類名放入選項值中。有了這個，如果您需要向文本添加另一種樣式（不僅是字體系列，而且您可以向類添加顏色或其他任何內容），它會更加靈活，這是您的案例的示例
var changeFont = function(font) {
console.log(font.value)
document.getElementById("output-text").className = "text-center " + font.value;
}
.bold {
font-family: Verdana;
font-size: 12px;
color: blue;
font-weight: bold;
}
.miring {
font-family: Verdana;
font-size: 12px;
color: blue;
font-style: italic;
}
.Arial{
font-family: Arial;
}
.Algerian{
font-family: Algerian;
}
.Berlin-sans-fb{
font-family: 'Berlin sans fb';
}
.Times-new-roman{
font-family: 'Times New Roman';
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h3>Text Style Changed with combobox</h3>
</div>
<div class="text-center" id="output-text">
Hello Guys
</div>
<div class="text-center">
<select id="input-font" class="input" onchange="changeFont (this);">
<option value="Times-new-roman" selected="selected">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="Algerian">Algerian</option>
<option value="Berlin-sans-fb">Berlin Sans FB</option>
<option value="bold" class="bold">Tebal</option>
<option value="miring" class="miring">Miring</option>
<option value="" class="">Style1</option>
<option value="" class="">Style2</option>
<option value="" class="">Style3</option>
</select>
</div>
撒科打諢
TA貢獻1934條經驗 獲得超2個贊
如果您想附加一堆樣式，我建議您使用 className。
例如，在您的腳本標記中您可以添加：
document.getElementById("output-text").className = font.value;
躍然一笑
TA貢獻1826條經驗 獲得超6個贊
為什么不試試 if 語句呢？我認為你需要innerHTML。
var changeFont = function(font) {
if (font === "tebal") {
document.getElementById("output-text").innerHTML = "You have selected Tebal!";
} else if (font === miring) {
document.getElementById("output-text").innerHTML = "You have selected Miring!";
} else...
編輯：啊，看來我讀錯了你的問題。不過您仍然可以使用循環來改變樣式！
- 3 回答
- 0 關注
- 182 瀏覽
添加回答
舉報
0/150
提交
取消