You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.1 KiB
62 lines
2.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Změna všeho</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<h1>Změna textu</h1>
|
|
<p id="textik">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas, eligendi itaque. Quasi, ut? Iure quasi laborum minima quam magni nulla autem architecto, esse nisi error corrupti adipisci velit facilis. Hic.</p>
|
|
|
|
<hr>
|
|
|
|
<select id="seznamFontu" onchange="changetext()">
|
|
<option>Impact</option>
|
|
<option>Comforter</option>
|
|
<option>Roboto</option>
|
|
<option>Arial</option>
|
|
<option>Arial Black</option>
|
|
</select>
|
|
<select id="Velikost" onchange="changeSize()">
|
|
<option>10px</option>
|
|
<option>20px</option>
|
|
<option>30px</option>
|
|
<option>40px</option>
|
|
<option>50px</option>
|
|
</select>
|
|
<select id="Barva" onchange="changeColor()">
|
|
<option value="black">Černá</option>
|
|
<option value="blue">Modrá</option>
|
|
<option value="red">Červená</option>
|
|
<option value="green">Zelená</option>
|
|
<option value="purple">Fialová</option>
|
|
</select>
|
|
|
|
<script>
|
|
function changetext() {
|
|
let fontlist = document.getElementById("seznamFontu");
|
|
let futureFont = fontlist.options[fontlist.selectedIndex].text;
|
|
|
|
document.getElementById("textik").style.fontFamily = futureFont;
|
|
}
|
|
|
|
function changeSize(params) {
|
|
let sizelist = document.getElementById("Velikost");
|
|
let futureSize = sizelist.options[sizelist.selectedIndex].text;
|
|
|
|
document.getElementById("textik").style.fontSize = futureSize;
|
|
}
|
|
|
|
function changeColor() {
|
|
let colorlist = document.getElementById("Barva");
|
|
let futureColor = colorlist.options[colorlist.selectedIndex].value;
|
|
|
|
document.getElementById("textik").style.color = futureColor;
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|