Bagaimana untuk menyelaraskan imej pada kad dengan tajuk dinamik dalam Javascript?-tutorial js-php.cn

Bagaimana untuk menyelaraskan imej pada kad dengan tajuk dinamik dalam Javascript?

WBOY

Lepaskan： 2023-09-12 11:37:10

ke hadapan

585 orang telah melayarinya

如何在 Javascript 中将卡片上的图像与动态标题对齐？

Kita boleh menjajarkan imej dalam kad dengan menggunakan CSS untuk menetapkan kedudukan dan margin imej dalam bekas kad. Kami juga boleh menggunakan Flexbox atau Grid untuk menjajarkan imej dan tajuk dengan cara tertentu. Dengan menggunakan tajuk dinamik, kita boleh menukar teks yang dipaparkan dalam tajuk kad berdasarkan input pengguna atau data daripada pangkalan data.

kaedah

Mulakan dengan mencipta bekas untuk kad anda. Ini boleh menjadi elemen div atau bahagian.
Dalam bekas ini, tambahkan elemen div atau pengepala untuk memegang tajuk dinamik. Pastikan anda memberikan kelas atau ID yang unik supaya anda boleh menggayakannya kemudian.
Seterusnya, tambahkan elemen imej di dalam bekas kad. Anda boleh menggunakan tag img atau imej latar belakang di dalam div.
Gunakan CSS untuk menjajarkan imej dan tajuk dalam bekas kad. Anda boleh menggunakan paparan: sifat flex untuk menjajarkan item secara mendatar atau menegak.
Untuk memusatkan imej dan tajuk, anda boleh memusatkannya secara mendatar dan menegak menggunakan sifat justify-content dan align-item.
Jika anda ingin menambah jidar atau penggayaan lain pada kad anda, anda boleh menyesuaikan penampilannya menggunakan ciri jidar dan latar belakang.
Untuk mengemas kini tajuk secara dinamik, anda boleh menggunakan JavaScript untuk menukar innerHTML atau teksKandungan elemen tajuk.
Akhir sekali, uji kad anda untuk memastikan imej dan tajuk diselaraskan dengan betul dan tajuk dikemas kini secara dinamik mengikut keperluan.

Contoh

Berikut ialah contoh kad yang berfungsi sepenuhnya dengan tajuk dinamik dan imej sejajar -

<!DOCTYPE html>
<html>
<head>
   <title>Align Images</title>
   <style>
      .card-container {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
         border: 1px solid #ccc;
         padding: 10px;
         margin: 10px;
      }
      .card-title {
         font-size: 24px;
         font-weight: bold;
         text-align: center;
         margin-bottom: 10px;
      }
      img {
         max-width: 100%;
      }
   </style>
</head>
   <body>
      <div class="card-container">
      <header class="card-title">My Title</header>
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" class="card-image">
      </div>
      <script>
         let title = document.querySelector('.card-title');
         let newTitle = "New Dynamic Title";
         title.innerHTML = newTitle;
         title.style.color = 'black';
      </script>
   </body>
</html>

Salin selepas log masuk

Penerangan

Contoh ini menggunakan kelas "kad-bekas" untuk mencipta div bekas yang mengandungi pengepala Elemen tajuk dan elemen imej. Ia menggunakan CSS untuk menyelaraskan elemen Bekas, memusatkan elemen dan menambah sempadan dan pelapik pada bekas. Ia juga menggunakan JavaScript menukar HTML dalaman elemen tajuk untuk mengemas kininya secara dinamik.

Atas ialah kandungan terperinci Bagaimana untuk menyelaraskan imej pada kad dengan tajuk dinamik dalam Javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!