| Autor | Zpráva | ||
|---|---|---|---|
| Taurus Profil |
#1 · Zasláno: 1. 7. 2010, 15:27:28
Rád bych po zatržení checkboxu obarvil všechny třídy na jinou barvu.
getElementById mi obarvuje jen první výskyt, getElementsByClassName/TagName mi nefungovalo ani při změně id na class. Jsem na javaskript blbý, mohl by mi někdo, prosím, poradit? Díky. Živě: http://jpw.odemne.com/prebarvi/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Změna obarvení</title>
<style type="text/css">
body {margin: 20px; font: 1.5em Georgia}
#cervena {color: #c00; font-weight: bold}
.zelena {color: #0a0!important}
#vypis {float: left; width: 360px; font-style: italic; font-weight: bold}
input {margin-top: 8px}
</style>
<script type="text/javascript">
function zelena(){
if (document.formular.skrt.checked) {
document.getElementById('cervena').className = 'zelena';
document.getElementById("vypis").innerHTML = "Zčervenej zelené pštrosy";
}
else {
document.getElementById('cervena').className = 'cervena';
document.getElementById("vypis").innerHTML = "Zezelenej červené pštrosy";
}
}
</script>
</head>
<body>
<form name="formular">
<span id="vypis">Zezelenej červené pštrosy</span>
<input type="checkbox" onClick="zelena();" name="skrt">
</form>
<p>Šel pštros s pštrosicí a pštrošáčaty, jeden vypadal <span id="cervena">červeně</span>,<br />druhý a třetí vesele a poslední se <span id="cervena">červenal</span>.</p>
</body>
</html>
|
||
| Chamurappi Profil |
#2 · Zasláno: 1. 7. 2010, 15:32:06 · Upravil/a: Chamurappi
Reaguji na Taura:
Nejsnazší je změnit třídu společného rodiče a upravit CSS, aby se potomci elementu s danou třídou přebarvovali. Nepotřebuješ na to žádné speciální znalosti, stačí nastavovat document.getElementById("společný-rodič").className (nebo třeba document.body.className, pokud jde o celý dokument, společný rodič může být <body>) a pak přizpůsobit stylopis přítomnosti té jedné třídy.
|
||
| Taurus Profil |
#3 · Zasláno: 1. 7. 2010, 15:50:27
Děkuju moc, prosté jako já. :-)
Přidávám řešení a odkaz jsem aktualizoval. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Změna obarvení</title>
<style type="text/css">
body {margin: 20px; font: 1.5em Georgia}
.cervena {color: #c00; font-weight: bold}
body.prebarvene .cervena {color: #0a0}
#vypis {float: left; width: 360px; font-style: italic; font-weight: bold}
input {margin-top: 8px}
</style>
<script type="text/javascript">
function obarvi(){
if (document.formular.skrt.checked) {
document.body.className = 'prebarvene';
document.getElementById("vypis").innerHTML = "Zčervenej zelené pštrosy";
}
else {
document.body.className = '';
document.getElementById("vypis").innerHTML = "Zezelenej červené pštrosy";
}
}
</script>
</head>
<body>
<form name="formular">
<span id="vypis">Zezelenej červené pštrosy</span>
<input type="checkbox" onClick="obarvi();" name="skrt">
</form>
<p>Šel pštros s pštrosicí a pštrošáčaty, jeden vypadal <span class="cervena">červeně</span>,<br />druhý a třetí vesele a poslední se <span class="cervena">červenal</span>.</p>
</body>
</html> |
||
|
Časová prodleva: 14 let
|
|||
0