div 添加 onclick 打开图片

在网页设计中，div 元素通常用于布局和定位，但是如果我们需要在点击 div 元素时打开一个图片，该怎么实现呢？

我们可以通过给 div 元素添加一个 onclick 属性并绑定一个 JavaScript 函数来实现。JavaScript 函数中，我们可以使用 document.getElementById() 方法获取到需要显示图片的元素，并将其 display 样式设置为 "block" 以显示图片。

具体实现步骤如下：
1. 添加一个 div 元素并设置其样式，如下所示：

<div id="demo" style="width: 300px; height: 200px; background-color: #ccc;"></div>

2. 给 div 元素添加一个 onclick 属性，如下所示：

<div id="demo" style="width: 300px; height: 200px; background-color: #ccc;" onclick="showImg()"></div>

3. 在 JavaScript 中定义一个 showImg() 函数，代码如下所示：

function showImg() {
// 获取图片元素
var img = document.getElementById("img");
// 设置图片为显示状态
img.style.display = "block";
}

4. 在页面中添加一个 img 元素来显示图片，并将其 display 样式设置为 "none"，如下所示：

<img id="img" src="https://picsum.photos/300/200" style="display: none;">

这样，当我们点击 div 元素时，就会调用 showImg() 函数显示图片。需要注意的是，img 元素的 display 样式需要设置为 "none"，否则图片一开始就会显示在页面中，而不是在点击 div 元素后才显示。