我想创建一个选择框来更改字体，并且我想在 3 或 4 种字体样式之间进行选择前任。当我点击字体 1 时，对于所有网站来说，它必须更改为“Franklin Gothic Medium”，这才是重点。 <script>function changeFont() { document.getElementById("body").style.fontFamily = 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;} <script> <div class="option-box"> <h4>Font Style</h4> <div class="fonts"> <select name="" id="myfont"> <option>font 1</option> <option>font 2</option> <option>font 3</option> </select> </div> </div>
2 回答
潇潇雨雨
TA贡献1833条经验 获得超4个赞
一步步学习或者花钱找人来做就可以了。
这是一个开始，学习倾听select变化。
<html>
<body>
<select id="myfont">
<option value='robotFont'>font 1</option>
<option value='secondFont'>font 2</option>
<option value='uglyFont'>font 3</option>
</select>
<script>
const fontSelector = document.getElementById('myfont');
fontSelector.addEventListener('change', () => {
console.log("fontSelector change", fontSelector.value);
});
</script>
</body>
</html>
下一步可能是
有一些 css 类来指定字体，例如
.robotFont，...修改eventListener来切换body上的字体类
12345678_0001
TA贡献1802条经验 获得超5个赞
仅基本CSS解决方案（JS是注入CSS而不需要滚动其中一个框）
document.querySelector( 'style' ).innerHTML += `
html {
color: #222;
font-family: Arial;
text-transform: capitalize;
}
html, body, h2, p, ul {
margin: 0;
padding: 0;
list-style-type: none;
}
body {
padding: 1rem;
}
h2 {
margin-bottom: 0.5rem;
}
main .button {
cursor: pointer;
}
.button {
position: relative;
}
.dropdown {
display: none;
position: absolute;
top: 2.75rem;
left: -0.1rem;
right: -0.1rem;
background-color: #fff;
}
#toggle:checked ~ main .dropdown { display: block; }
`;
main .button, span, span::after, .dropdown, li {
display: inline-block;
padding: 0.25rem;
border-style: solid;
border-color: #666;
user-select: none;
}
.button:hover, .button:hover .span_wrapper span::after,li:hover {
background-color: #eee;
}
.button:active, .button:active .span_wrapper span::after, li:active {
background-color: #ccc;
}
main p {
padding: 0.25rem 1rem;
}
.span_wrapper {
transform: scale( 0.75 ) translateY( -0.125rem ); border-style: none;
}
.span_wrapper span, .span_wrapper span::after {
transform: rotate( 45deg ); width: 1rem; height: 1rem;
padding: 0; border-style: none;
background-color: #222; content: "";
}
.span_wrapper span::after {
transform: translateY( -0.125rem ) translateX( -0.125rem );
background-color: #fff;
}
#arial:checked ~ main { font-family: Arial; }
#verdana:checked ~ main { font-family: Verdana; }
#georgia:checked ~ main { font-family: Georgia; }
input { display: none; }
html body { padding-top: 0 }
<style>
li {
display: block; padding: 0.5rem; border-style: none;
}
</style>
<header>
</header>
<input type="checkbox" id="toggle">
<input type="radio" id="arial" name="font">
<input type="radio" id="verdana" name="font">
<input type="radio" id="georgia" name="font">
<main>
<h2>font style</h2>
<label for="toggle">
<div class="button">
<p>
arial
<span class="span_wrapper">
<span></span>
</span>
</p>
<div class="dropdown">
<ul>
<li><label for="arial">Arial</label></li>
<li><label for="verdana">Verdana</label></li>
<li><label for="georgia">Georgia</label></li>
</ul>
</div>
</div>
</label>
<br><br>
<p>lorem ipsum</p>
</main>
添加回答
举报
0/150
提交
取消