我正在尝试在我的网站上选择 3 或 4 种字体样式
我想创建一个选择框来更改字体，并且我想在 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>
缥缈止盈浏览 91回答 2
2回答
-
潇潇雨雨
一步步学习或者花钱找人来做就可以了。这是一个开始，学习倾听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
仅基本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>
随时随地看视频慕课网APP
相关分类
JavaScript