如何结合JavaScript与Django模板实现图片高度切换调整？

需求场景 #

现有Django模型存储图片尺寸，视图筛选图片后在模板渲染，需要添加两个按钮：

• 按钮1：将所有图片高度统一设为100px
• 按钮2：恢复为模型中存储的原始高度

现有代码 #

模型定义

class Image(Work):
    size_height_cm = models.FloatField(null=True, blank=True)
    size_width_cm = models.FloatField(null=True, blank=True)
    size_depth_cm = models.FloatField(null=True, blank=True)

视图查询

works=Image.objects.filter(creator=self.kwargs['pk'])

原模板渲染

{% for work in works %}
<div class="work">
    <a href="../../work/{{ work.pk }}">
        <img class="work-object" src="{{ work.pic.url }}" alt="{{ work.name_complete }}" height="{{ work.display_height }}">
    </a>
</div>
{% endfor %}

实现步骤 #

1. 修改模板，存储原始高度 #

在img标签中添加data-original-height属性，把模型中的原始高度值绑定到DOM元素上，方便JavaScript读取：

{% for work in works %}
<div class="work">
    <a href="../../work/{{ work.pk }}">
        <img class="work-object" 
             src="{{ work.pic.url }}" 
             alt="{{ work.name_complete }}" 
             height="{{ work.display_height }}"
             data-original-height="{{ work.display_height }}">
    </a>
</div>
{% endfor %}

<!-- 添加控制按钮 -->
<button id="btn-set-100">按钮1（统一100px）</button>
<button id="btn-restore">按钮2（恢复原高度）</button>

2. 编写JavaScript处理点击事件 #

在模板底部（或单独的JS文件）添加以下代码，实现按钮的切换功能：

// 获取所有图片和按钮元素
const images = document.querySelectorAll('.work-object');
const setBtn = document.getElementById('btn-set-100');
const restoreBtn = document.getElementById('btn-restore');

// 按钮1：设置所有图片高度为100px
setBtn.addEventListener('click', () => {
    images.forEach(img => {
        img.setAttribute('height', '100');
    });
});

// 按钮2：恢复每个图片的原始高度
restoreBtn.addEventListener('click', () => {
    images.forEach(img => {
        const originalHeight = img.getAttribute('data-original-height');
        if (originalHeight) {
            img.setAttribute('height', originalHeight);
        }
    });
});

原理说明 #

借助HTML的data-*自定义属性，在模板渲染阶段就把每个图片的原始高度直接存储到对应的img元素上，JavaScript无需额外传递数据，直接从DOM元素读取原始高度值，就能实现批量修改和恢复的功能。

内容的提问来源于stack exchange，提问作者H C