資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 Javascript 在卡片上對齊帶有動態標題的影像？
我們可以透過使用 CSS 設定影像在卡片容器內的位置和邊距來對齊卡片中的影像。我們還可以使用 Flexbox 或 Grid 以特定方式對齊影像和標題。透過使用動態標題，我們可以根據使用者輸入或資料庫中的資料更改卡片標題中顯示的文字。
方法
首先為您的卡片建立一個容器。這可以是 div 或 section 元素。
在此容器內，新增一個 div 或 header 元素來容納您的動態標題。確保為其提供唯一的類或 ID，以便稍後對其進行樣式設定。
接下來，將影像元素新增到卡片容器中。您可以使用 img 標籤或 div 中的背景影像。
使用 CSS 對齊卡片容器內的影像和標題。您可以使用 display: flex 屬性水平或垂直對齊專案。
要居中對齊影像和標題，您可以使用 justify-content 和 align-items 屬性將其水平和垂直居中。
如果要向卡片新增邊框或其他樣式，可以使用 border 和 background 屬性自定義其外觀。
要動態更新標題，您可以使用 JavaScript 更改標題元素的 innerHTML 或 textContent。
最後，測試您的卡片以確保影像和標題正確對齊，並且標題按預期動態更新。
示例
這是一個帶有動態標題和對齊影像的卡片的完整工作示例：
<!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>
解釋
此示例建立了一個具有類“card-container”的容器 div，其中包含一個用於標題的 header 元素和一個影像元素。它使用 CSS 對齊容器內的元素，居中元素，並向容器新增邊框和填充。它還使用 JavaScript 更改標題元素的 inner HTML 以動態更新它。
更新於： 2023年2月13日
1K+ 閱讀量
廣告