Bagaimana untuk menetapkan teks pada halaman web menggunakan JavaScript

JavaScript ialah bahasa pengaturcaraan web yang digunakan secara meluas. Ia adalah alat penting untuk merealisasikan fungsi penting seperti kesan khas dinamik pada halaman web dan pengesahan borang. Artikel ini akan membincangkan cara menggunakan JavaScript untuk menetapkan teks pada halaman web, termasuk menetapkan kandungan teks, gaya, lokasi, pautan dan kesan khas.

1. Tetapkan kandungan teks

Cara paling mudah untuk menetapkan kandungan teks pada halaman web ialah menambah teks melalui bahasa HTML. Contohnya, gunakan teg

untuk menambah teks tajuk peringkat pertama, gunakan teg

Tetapi kadangkala kita perlu menetapkan kandungan teks melalui JavaScript. Ini boleh dicapai melalui sifat getElementById dan innerHTML.

1. getElementById

Kaedah getElementById membolehkan kami mendapatkan rujukan kepada elemen tertentu melalui ID elemen, dan kemudian menggunakan atribut innerHTML untuk menetapkan kandungan teks unsur. Sebagai contoh, kod berikut akan menetapkan kandungan teks elemen dengan ID "demo" kepada "Hello World!".

document.getElementById("demo").innerHTML = "Hello World!";

2. innerHTML

innerHTML atribut digunakan untuk mendapatkan atau menetapkan kandungan HTML elemen. Jika anda menggunakan atribut ini untuk menetapkan kandungan HTML, sebarang elemen HTML yang sudah ada dalam elemen ini akan digantikan dengan kandungan HTML baharu. Sebagai contoh, kod berikut akan menggantikan kandungan HTML elemen dengan ID "demo" dengan dua perenggan teks.

document.getElementById("demo").innerHTML = "<p>第一段落</p><p>第二段落</p>";

2. Tetapkan gaya teks

Anda boleh menetapkan gaya teks melalui JavaScript, seperti fon, warna, saiz, penjajaran, dsb. Kaedah untuk menetapkan gaya teks termasuk menambah atau menukar kelas CSS dan menggunakan atribut gaya.

1. Tambah atau tukar kelas CSS

Anda boleh menambah atau menukar kelas CSS dalam dokumen HTML melalui JavaScript untuk menetapkan gaya teks. Sebagai contoh, kod berikut akan menambah kelas CSS baharu pada teks elemen dengan ID "demo", yang akan menetapkan warna fon teks kepada merah.

document.getElementById("demo").classList.add("red");

Kelas CSS ditakrifkan dalam helaian gaya CSS, contohnya:

.red{
  color: red;
}

2. Gunakan atribut gaya

untuk perubahan gaya pada elemen tunggal, anda boleh menggunakan atribut gaya. Sifat ini membolehkan kami menukar sifat CSS elemen secara terus. Sebagai contoh, kod berikut menetapkan saiz fon dan warna untuk teks elemen dengan ID "demo":

document.getElementById("demo").style.fontSize = "24px";
document.getElementById("demo").style.color = "blue";

3. Tetapkan kedudukan teks

Kita juga boleh menetapkan teks melalui Kedudukan JavaScript, seperti menetapkan teks untuk dipusatkan secara menegak atau mendatar. Ini boleh dicapai dengan menukar atribut kedudukan elemen.

1. Berpusat secara mendatar

Untuk memusatkan elemen secara mendatar, tetapkan jidar kiri dan kanannya kepada "auto". Sebagai contoh, kod berikut akan memusatkan elemen dengan ID "demo" secara mendatar.

document.getElementById("demo").style.marginLeft = "auto";
document.getElementById("demo").style.marginRight = "auto";

2. Tegak Berpusat

Untuk memusatkan elemen secara menegak, anda boleh menetapkan jidar atas dan bawahnya kepada "auto" dan ketinggian elemen induknya Tetapkan sama kepada ketinggian viewport. Sebagai contoh, kod berikut akan memusatkan elemen secara menegak dengan ID "demo".

document.getElementById("demo").style.marginTop = "auto";
document.getElementById("demo").style.marginBottom = "auto";
document.getElementById("parent").style.height = window.innerHeight + "px";

4. Tetapkan pautan teks

Selain kandungan dan gaya teks statik, kami juga boleh menambah pautan dan acara tetikus pada teks melalui JavaScript. Ini boleh dicapai dengan menetapkan atribut href bagi elemen dan menambah pendengar acara.

1. Pautan

Jika anda ingin menambah pautan pada teks, anda boleh menggunakan atribut href bagi elemen tersebut. Sebagai contoh, kod berikut akan menukar teks dengan ID "demo" menjadi pautan dengan mengklik pautan akan melompat ke tapak web "www.example.com".

document.getElementById("demo").innerHTML = "<a href=&#39;http://www.example.com&#39;>点击这里</a>";

2. Acara tetikus

Melalui kaedah addEventListener objek HTMLElement atau sifat pengendali acara, kami boleh menambah acara tetikus, seperti klik tetikus, tuding , Pergerakan dan acara lain. Sebagai contoh, kod berikut akan menyebabkan elemen dengan ID "demo" menukar warna teksnya apabila melayang di atasnya.

document.getElementById("demo").addEventListener("mouseover", function() {
  this.style.color = "red";
});
document.getElementById("demo").addEventListener("mouseout", function() {
  this.style.color = "black";
});

5 Kesan khas

Dalam halaman web, kami juga boleh menggunakan JavaScript untuk menambah kesan khas pada teks, seperti tetingkap timbul, menatal, berkelip dan kesan lain. Ini boleh dicapai dengan menggunakan animasi JavaScript dan perpustakaan kesan.

1. Animasi

Kesan animasi boleh dicapai dengan menggunakan perpustakaan animasi JavaScript, seperti jQuery dan Animate.css. Sebagai contoh, kod berikut akan mengalihkan elemen dengan ID "demo" ke atas dan ke bawah.

$("#demo").animate({
  top: '+=50px'
}, 1000);

2. Kesan Khas

Kesan khas boleh dicapai dengan menggunakan perpustakaan kesan JavaScript, seperti WOW.js dan Animate.css. Contohnya, kod berikut akan menyebabkan elemen dengan ID "demo" berkelip.

$("#demo").addClass("animated infinite flash");

Dalam artikel ini, kita membincangkan cara menggunakan JavaScript untuk menetapkan kandungan teks, gaya, kedudukan, pautan dan kesan khas pada halaman web. Teknologi ini akan membawa kemungkinan tanpa had kepada reka bentuk web anda, menjadikan halaman web anda lebih jelas dan menarik.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan teks pada halaman web menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!