Dynamic HTML: Perbedaan antara revisi

Konten dihapus Konten ditambahkan
Mattbrundage (bicara | kontrib)
→‎Struktur pada halaman web: ditingkatkan contoh
Mattbrundage (bicara | kontrib)
Baris 47:
 
Kode berikut menggambarkan fungsi yang paling sering digunakan. Bagian tambahan pada sebuah [[halaman web]] hanya akan ditampilkan jika pengguna menginginkannya.
<source lang="xmlhtml5">
<!doctype html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html lang="en">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta charset="utf-8">
<head>
<title>TestCara menggunakan fungsi DOM</title>
<style type="text/css">
h2 a {background-color: lightblue#eee; width: 100%}
a:hover {background:#ff0;}
a {font-size: larger; background-color: goldenrod}
a:hover #contoh1 {background-color:#cfc; golddisplay:none; margin:30px 0; padding:1em;}
} else {</style>
#example1 {display: none; margin: 3%; padding: 4%; background-color: limegreen}
</stylehead>
<body>
<script type="text/javascript">
<h2h1>Cara menggunakan fungsi DOM</h2h1>
function changeDisplayState (id) {
 
d=document.getElementById("tampilkansembunyikan");
<divh2><a id="tampilkansembunyikan" href="javascript:changeDisplayState('contoh1')#">Tampilkan contoh</a></divh2>
e=document.getElementById(id);
 
if (e.style.display == 'none' || e.style.display == "") {
e.style.display<p id="contoh1">Ini 'block';adalah sebuah contoh.
(Informasi tambahan, hanya ditampilkan jika diinginkan pengguna)...</p>
d.innerHTML = 'Sembunyikan contoh..............';
 
} else {
e<p>Lanjutan teks.style.display = 'none';.</p>
 
d.innerHTML = 'Tampilkan contoh';
} <script>
function changeDisplayState = function (id) {
}
var d = document.getElementById("'tampilkansembunyikan"');,
</script>
e = document.getElementById(id);
</head>
if (e.style.display === 'none' || e.style.display === ""'') {
<body>
e.style.display = 'block';
<h2>Cara menggunakan fungsi DOM</h2>
d.innerHTML = 'Sembunyikan contoh..............';
<div><a id="tampilkansembunyikan" href="javascript:changeDisplayState('contoh1')">Tampilkan contoh</a></div>
}
<div id="contoh1">
Ini adalah sebuah contoh. else {
e.style.display = 'none';
(Informasi tambahan, hanya ditampilkan jika diinginkan pengguna)...
d.innerHTML = 'Tampilkan contoh';
</div>
}
<div>Lanjutan teks...</div>
};
</body>
document.getElementById('tampilkansembunyikan').onclick = function () {
changeDisplayState('contoh1');
return false;
};
</script>
</headbody>
</html>
</source>