Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk menetapkan teks pada halaman web menggunakan JavaScript

Bagaimana untuk menetapkan teks pada halaman web menggunakan JavaScript

PHPz
Lepaskan: 2023-04-24 11:20:40
asal
2473 orang telah melayarinya

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!";
Salin selepas log masuk
  1. 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>";
Salin selepas log masuk

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");
Salin selepas log masuk

Kelas CSS ditakrifkan dalam helaian gaya CSS, contohnya:

.red{
  color: red;
}
Salin selepas log masuk
  1. 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";
Salin selepas log masuk

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";
Salin selepas log masuk
  1. 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";
Salin selepas log masuk

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>";
Salin selepas log masuk
  1. 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";
});
Salin selepas log masuk

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);
Salin selepas log masuk
  1. 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");
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan