ウェブサイトで作業していて、ウェブサイトの2つのフォントの違いを別のページに表示したいとします。簡単なクリックでフォント間を変更する
フォントを簡単に切り替えることができるようにコードを書く方法はありますか？
2番目のスタイルシートを2番目のフォントで作成し、jQueryを使用してスタイルシートを無効/有効にすることを考えていました。しかし、これは私がそこにあるすべてのページにこれを置かなければならないことを意味します。
良い方法がありますか？
を使用してそれらを切り替えることができます。 "font-familys"のクラスを単に切り替えるだけです。
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.text {
height: 100%;
width: 100%;
padding: 500px;
box-sizing: border-box;
font-family: cursive;
}
.font {
font-family: monospace !important;
}
button {
position: relative;
left: 50%;
transform: translate(-50%);
background-color: black;
border: none;
color: white;
margin: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FontChange</title>
<link rel="stylesheet" type="text/css" href="test.css">
<!-- Hosted jQuery libary -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(".text").toggleClass("font");
})
});
</script>
</head>
<body>
<div class="text">
<button>Click me to change the font-family!</button></br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</body>
</html>
あなたがが試してみましたあなたはこれを行うことができ、いくつかの方法が...あります：あなたが1つのDIVのフォントを変更したい場合はここで
は一例でしょうか？ – Optionbodyタグのクラスを切り替えるボタンを作成します。 – Turnip
@option Haventは何でも試しました。 Googleのソリューションを1時間ほど探していたが、何ができるのか分からなかったので、ここで質問することにした。 – job