Menetapkan sifat elemen HTML menggunakan JavaScript: Kaedah Moden

Entiti JavaScript, sebagai ciri Netscape Navigator 3.x, belum digunakan secara meluas. Oleh itu, ia tidak lagi boleh dilaksanakan untuk menetapkan sifat -sifat elemen HTML dengan bergantung pada kaedah ini. Sebaliknya, JavaScript moden menyediakan penyelesaian yang lebih dipercayai dan umum.

Berikut ini menerangkan cara moden untuk menetapkan sifat elemen HTML secara dinamik menggunakan JavaScript, dengan kod sampel.

1. Dapatkan input pengguna

Pertama, kita perlu mendapatkan lebar dan ketinggian imej yang disediakan oleh pengguna. Anda boleh menggunakan fungsi Prompt () untuk memaparkan kotak dialog yang meminta pengguna memasukkan nilai.

 fungsi getimagedimensions () {
  biarkan lebar = prompt ("Sila masukkan lebar imej:");
  Biarkan ketinggian = prompt ("Sila masukkan ketinggian imej:");

  // Sahkan bahawa input adalah nombor jika (isnan (lebar) || isnan (ketinggian)) {
    Alert ("Sila masukkan nombor yang sah!");
    kembali null; // atau mengembalikan nilai lalai}

  lebar = parseInt (lebar); // Tukar rentetan ke ketinggian integer = parseInt (ketinggian); // tukar rentetan ke integer kembali {lebar, ketinggian};
}

2. Dapatkan elemen imej

Seterusnya, kita perlu mendapatkan elemen imej dalam HTML. Anda boleh menggunakan kaedah Document.GetElementById (), dengan syarat bahawa elemen imej mempunyai ID yang unik.

 <img id="myImage" src="gun1.jpg" alt="image">

 const image = document.getElementById ("myImage");

3. Tetapkan sifat imej

Akhirnya, kami menetapkan nilai lebar dan ketinggian yang diperoleh kepada sifat lebar dan ketinggian elemen imej.

 fungsi setImagedImensions () {
  const dimensi = getImagedImensions ();

  jika (dimensi) {
    image.width = dimensi.width;
    image.height = dimensi.height;
  }
}

// Panggil fungsi ini selepas pemuatan halaman selesai window.onload = setImageMensions;

Contoh kod lengkap:

 


   Tetapan dinamik saiz imej 
  <script>
    fungsi getimagedimensions () {
      biarkan lebar = prompt ("Sila masukkan lebar imej:");
      Biarkan ketinggian = prompt ("Sila masukkan ketinggian imej:");

      jika (isnan (lebar) || isnan (ketinggian)) {
        Alert ("Sila masukkan nombor yang sah!");
        kembali null;
      }

      lebar = parseInt (lebar);
      ketinggian = parseInt (ketinggian);

      kembali {lebar, ketinggian};
    }

    fungsi setImagedImensions () {
      const image = document.getElementById (&quot;myImage&quot;);
      const dimensi = getImagedImensions ();

      jika (dimensi) {
        image.width = dimensi.width;
        image.height = dimensi.height;
      }
    }

    window.onload = setImagedImensions;
  </script>


  <img id="myImage" src="gun1.jpg" alt="image">

Nota:

• Pastikan pengguna memasuki nombor yang sah. Fungsi ISNAN () boleh digunakan untuk pengesahan.
• Tukar rentetan yang dimasukkan oleh pengguna ke jenis angka, anda boleh menggunakan fungsi parseInt () atau parseFloat ().
• Pastikan elemen imej mempunyai ID yang unik supaya dapat diperoleh menggunakan kaedah Document.GetElementById ().
• Panggil fungsi setimagedimensions () selepas halaman dimuatkan untuk memastikan bahawa elemen imej telah dimuatkan. Anda boleh menggunakan pengendali acara Window.onload.
• Fungsi eval () mempunyai risiko keselamatan dan harus dielakkan sebanyak mungkin. Kod di atas menggunakan parseInt () bukannya eval () untuk keselamatan.

Meringkaskan:

Dengan menggunakan teknologi JavaScript moden, kita dapat dengan mudah menetapkan sifat elemen HTML secara dinamik tanpa bergantung pada entiti JavaScript yang sudah lapuk. Kaedah ini bukan sahaja lebih dipercayai, tetapi juga lebih selamat. Memahami dan menguasai penggunaan JavaScript moden dapat membantu pemaju membina aplikasi web yang lebih mantap dan serasi. Ingatlah bahawa mengemas kini pengetahuan tepat pada masanya dan memeluk piawaian teknikal baru adalah kunci untuk menjadi pemaju web yang sangat baik.

Atas ialah kandungan terperinci Menetapkan sifat elemen HTML menggunakan JavaScript: Kaedah Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!