Add URL dan ID Class Pakai JavaScript Onclick

Trik ini bisa Anda gunakan untuk membuat sebuah link baru atau id dari anchor link dan class tanpa  jQuery. Cara menggunakannya sangat sederhana, silahkan ikuti petunjuk berikut dengan seksama:

Langkah pertama, saya akan coba membuat susunan link dalam html, akan tetapi tidak menyertakan alamat situsnya
<a id="sgt" href="#sembunyi">Sigit Purnomo</a>
Langkah kedua, buat javascriptnya
<script>
function myFunction() {
    var x = document.getElementsByTagName("a")[0];
    if (x.id === "sgt") {
        x.href= "http://www.kangsigit.com";
x.id= "idBaru";
x.className= "tambahCSS";
x.style.fontSize= "22px";
    }
}
</script>

Javascript diatas bukan hanya berfungsi untuk menambahkan URL saja, tapi juga merubah nama ID dan Class.

Pada HTML A saya buat ID dengan nama "sgt" tapi pada javascript saya buat sebuah ID baru dengan nama "idBaru" dan juga untuk class saya beri nama "tambahCSS"

Jika dieksekusi, maka susunan html akan berubah menjadi:
<a id="idBaru" href="http://www.kangsigit.com" class="tambahCSS" style="font-size: 22px;">Sigit Purnomo</a>
Bagian x.style.fontSize dalam script akan ditampilkan langsung pada baris A href dan jika ingin menambah css dari luar, bisa dengan mengisi idBaru atau tambahCSS

Contoh
<style>
.tambahCSS {border:solid 1px #333;padding:3px 7px; background:#555;color:#fff;text-decoration:none}
</style>

Langkah terakhir, buat tombol pemicu untuk memanggi javascript dengan
<button onclick="myFunction()">Lihat URL</button>

Selain dengan button, Anda juga bisa menggunakan div, span, atau P dan sejenisnya.

URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini