前端开发实战：实现图片描述切换与网站主题切换功能

<section class="gallery">
    <div class="item">
        <img src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Osiris" alt="奥西里斯">
        <p class="description hidden">奥西里斯是古埃及神话中的冥界之神、农业之神和丰饶之神。</p>
        <button class="toggle-description">显示/隐藏描述</button>
    </div>

    <div class="item">
        <img src="https://via.placeholder.com/150/FF0000/FFFFFF?text=Isis" alt="伊西斯">
        <p class="description hidden">伊西斯是古埃及神话中最重要的女神之一，司掌生育、魔法和医疗。</p>
        <button class="toggle-description">显示/隐藏描述</button>
    </div>

    <div class="item">
        <img src="https://via.placeholder.com/150/00FF00/FFFFFF?text=Horus" alt="荷鲁斯">
        <p class="description hidden">荷鲁斯是古埃及神话中法老的守护神，象征着王权和秩序。</p>
        <button class="toggle-description">显示/隐藏描述</button>
    </div>
</section>

.gallery {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.item {
    border: 1px solid #ccc;
    padding: 15px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 4px;
}

.item .description {
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
    text-align: left;
}

/* 关键样式：隐藏描述 */
.item .description.hidden {
    display: none;
}

.item button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.item button:hover {
    background-color: #0056b3;
}

document.addEventListener('DOMContentLoaded', () => {
    const toggleButtons = document.querySelectorAll('.toggle-description');

    toggleButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 获取当前按钮的父元素 (.item)
            const parentItem = button.closest('.item');
            if (parentItem) {
                // 在父元素中查找描述段落
                const description = parentItem.querySelector('.description');
                if (description) {
                    // 切换 'hidden' 类
                    description.classList.toggle('hidden');
                    // 更新按钮文本
                    if (description.classList.contains('hidden')) {
                        button.textContent = '显示描述';
                    } else {
                        button.textContent = '隐藏描述';
                    }
                }
            }
        });
    });
});

/* 默认（亮色）主题变量 */
:root {
    --primary-bg: #f4f7f6; /* 主背景色 */
    --secondary-bg: #ffffff; /* 次要背景色，如卡片背景 */
    --primary-text: #333333; /* 主要文本颜色 */
    --secondary-text: #666666; /* 次要文本颜色 */
    --border-color: #e0e0e0; /* 边框颜色 */
    --button-bg: #007bff; /* 按钮背景色 */
    --button-text: #ffffff; /* 按钮文本色 */
}

/* 暗色主题变量 */
body.dark-theme {
    --primary-bg: #282c34;
    --secondary-bg: #3a3f4b;
    --primary-text: #e0e0e0;
    --secondary-text: #a0a0a0;
    --border-color: #555555;
    --button-bg: #61dafb;
    --button-text: #282c34;
}

/* 应用主题变量到元素 */
body {
    background-color: var(--primary-bg);
    color: var(--primary-text);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */
}

.item {
    background-color: var(--secondary-bg);
    border-color: var(--border-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 暗色主题下阴影可能需要调整 */
}

.item .description {
    color: var(--secondary-text);
}

.item button {
    background-color: var(--button-bg);
    color: var(--button-text);
}

<header>
    <h1>我的网站</h1>
    <button id="theme-toggle">切换主题</button>
</header>

document.addEventListener('DOMContentLoaded', () => {
    const themeToggleButton = document.getElementById('theme-toggle');
    const body = document.body;

    // 尝试从 localStorage 读取用户偏好主题
    const currentTheme = localStorage.getItem('theme');
    if (currentTheme === 'dark') {
        body.classList.add('dark-theme');
    }

    themeToggleButton.addEventListener('click', () => {
        body.classList.toggle('dark-theme');

        // 将用户偏好保存到 localStorage
        if (body.classList.contains('dark-theme')) {
            localStorage.setItem('theme', 'dark');
        } else {
            localStorage.setItem('theme', 'light');
        }
    });
});