Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta elemen imej secara dinamik menggunakan JavaScript?

Bagaimana untuk mencipta elemen imej secara dinamik menggunakan JavaScript?

王林ke hadapan: 2023-08-24 18:21:141176semak imbas

Dalam HTML, elemen imej digunakan untuk memaparkan imej pada halaman web. Dapatkan berbilang atribut mengikut keperluan, seperti 'src', 'alttext', 'height', 'width', dsb.

Dalam sesetengah kes, kita perlu menambahkan imej secara dinamik pada halaman web. Sebagai contoh, kami menyimpan jumlah data filem yang tidak diketahui dalam pangkalan data. Kami perlu mendapatkan data filem dan kami perlu memaparkan imej filem bersama dengan butiran setiap filem. Dalam kes ini, kita perlu menggunakan JavaScript untuk menambahkan imej dan data pada DOM.

Seterusnya, kita akan belajar menggunakan JavaScript untuk menambah elemen imej pada halaman web.

Gunakan kaedah Document.createElement()

Kaedah

document.createElement() mencipta sebarang elemen HTML menggunakan JavaScript. Ia mengambil nama teg sebagai parameter dan mengembalikan elemen HTML.

Selepas mencipta elemen HTML dalam JavaScript, kami boleh mengubah suai pelbagai atributnya dan menambahkannya pada DOM untuk memaparkan imej pada halaman web.

Tatabahasa

Pengguna boleh menggunakan kaedah document.createElement() untuk mencipta elemen imej secara dinamik mengikut sintaks berikut.

let dynamicImage = document.createElement('img');
dynamicImage.src = URL;

Dalam sintaks di atas, kami mencipta elemen imej menggunakan kaedah createElement() dan mengemas kini atribut "src" bagi elemen imej.

Contoh

Dalam contoh di bawah, kami mula-mula mencipta elemen imej. Selepas itu, kami mengemas kini atribut "src"nya dengan URL imej yang ingin kami paparkan pada halaman web.

Seterusnya, kami mengakses elemen div yang dipratentukan daripada DOM menggunakan idnya dan menambahkan imej yang baru dibuat sebagai anak kepada elemen div menggunakan kaedah appendChild().

Dalam output, pengguna boleh melihat bahawa imej ditambah menggunakan JavaScript.

<html>
<body>
   <h3>Using the <i> document.createElement() method </i> to Create image element dynamically using JavaScript </h3>
   <div id = "img"> </div>
   <script>
      let img = document.getElementById('img');
      // Create image element
      let dynamicImage = document.createElement('img');
      // Initialize the image source
      dynamicImage.src = "https://www.tutorialspoint.com/static/images/logo.png";
      // Add image to DOM
      img.appendChild(dynamicImage);
   </script>
</body>
</html>

Contoh

Dalam contoh di bawah, kami mencipta butang. Setiap kali pengguna mengklik butang, ia melaksanakan fungsi createImage().

Dalam fungsi createImage(), kami menggunakan kaedah createElement() untuk mencipta elemen imej baharu dan mengemas kini nilai atribut "src"nya. Selain itu, kami menggunakan kaedah setAttribute() untuk menetapkan id, ketinggian dan lebar imej.

Dalam output, pengguna boleh mengklik butang untuk melihat imej dalam saiz 200 x 200. Walau bagaimanapun, pengguna boleh menukar dimensi dalam kod dan menjalankan kod untuk memerhatikan output.

<html>
<body>
   <h3>Using the <i> document.createElement() method </i> to Create image element dynamically using JavaScript </h3>
   <div id = "img"> </div>
   <button id = "addImage" onclick = "createImage()"> Create Image </button>
   <script>
      function createImage() {
         let img = document.getElementById('img');
         let newImage = document.createElement('img');
         newImage.src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png";
         // Set attribute values for the image
         newImage.setAttribute('id', 'myImage');
         newImage.setAttribute('width', '200px');
         newImage.setAttribute('height', '200px');
         img.appendChild(newImage);
      }
   
   </script>
</body>
</html>

Gunakan pembina Imej()

image() ialah pembina yang digunakan untuk mencipta contoh elemen imej dalam JavaScript. Kami mencipta contoh imej dalam JavaScript menggunakan pembina dengan kata kunci "baru" dan melampirkannya pada objek DOM.

Tatabahasa

Pengguna boleh mencipta imej melalui JavaScript menggunakan pembina Image() mengikut sintaks berikut.

Let img = new Image();
img.src = URL;

Dalam sintaks di atas, kami mencipta contoh elemen imej menggunakan pembina image() dan mengemas kini nilai atribut srcnya.

Contoh

Dalam contoh di bawah, apabila pengguna mengklik butang, ia melaksanakan fungsi createImage() untuk menambahkan secara dinamik pada DOM.

Dalam fungsi createImage(), kami memulakan contoh imej menggunakan pembina Image() dan kemudian mengemas kini nilai atribut srcnya. Selain itu, kami menetapkan lebar dan ketinggian imej dengan mengemas kini nilai atribut dan melampirkannya sebagai anak kepada elemen div.

<html>
<body>
   <h3>Using the <i> Image() constructor </i> to Create image element dynamically using JavaScript</h3>
   <div id = "img"> </div>
   <button id = "addImage" onclick = "createImage()"> Create Image </button>
   <script>
      function createImage() {
         let img = document.getElementById('img');
         let devImage = new Image();
         devImage.src = "https://www.tutorialspoint.com/static/images/development.svg";
         devImage.setAttribute('width', '300px');
         devImage.setAttribute('height', '300px');
         img.appendChild(devImage);
      }
   </script>
</body>
</html>

Contoh

Dalam contoh di bawah, kami menggunakan JavaScript untuk melampirkan berbilang imej pada halaman web.

Dalam fungsi addMultiple(), kami mempunyai pelbagai url imej. Kami mengulangi tatasusunan dan pada setiap lelaran mencipta elemen imej baharu, mengemas kini atribut src dengan URL sumber yang diberikan dan menambahnya pada DOM.

Dalam output, pengguna boleh mengklik butang untuk melihat lima imej dinamik pada halaman web. Selain itu, imej berubah setiap kali pengguna mengklik butang.

<html>
<body>
   <h3>Using the <i> Image() constructor </i> to Create image element dynamically using JavaScript</h3>
   <div id = "img"> </div>
   <br> <br>
   <button id = "addImage" onclick = "AddMultiple()"> Add Multiple Images </button>
   <script>
      function AddMultiple() {
         let img = document.getElementById('img');
         let imageURLS = [
            "https://picsum.photos/200/300",
            "https://picsum.photos/200/300/?blur",
            "https://picsum.photos/200/300.webp",
            "https://picsum.photos/200",
            "https://picsum.photos/200/300"
         ]
         // Fetch random images and append to the DOM
         for (let i = 0; i < 5; i++) {
            let randomImage = new Image();
            randomImage.src = imageURLS[i];
            randomImage.alt = "Random Image";
            randomImage.width = 100;
            randomImage.height = 100;
            // Add right and left margin to the image
            randomImage.style.marginRight = "10px";
            randomImage.style.marginLeft = "10px";
            img.appendChild(randomImage);
         }
      }
   </script>
</body>
</html>

Kami mempelajari dua cara untuk melampirkan imej secara dinamik pada elemen Dom. Kaedah createElement() mencipta contoh mana-mana elemen HTML, termasuk elemen imej. Pembina image() hanya digunakan untuk mencipta contoh elemen imej, bukan elemen HTML lain.

Selain itu, seperti dalam contoh sebelumnya, kami mungkin mendapat pelbagai URL imej semasa pembangunan masa nyata dan perlu menambah berbilang imej dinamik pada halaman web.

Atas ialah kandungan terperinci Bagaimana untuk mencipta elemen imej secara dinamik menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html 构造函数对象 dom 数据库

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk membalikkan segi empat tepat secara mendatar menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk membalikkan segi empat tepat secara mendatar menggunakan FabricJS?

Artikel berkaitan

Lihat lagi