如何实现点击图片元素时修改页面div元素的透明度？

我想在点击img元素时，用JavaScript或jQuery修改div元素的透明度，不确定能不能通过CSS或HTML实现，求相关方法。

当前代码 #

HTML部分 #

<div class="scene" id="scene">the text</div> 
<!-- 想要修改透明度的文本元素 -->

<img src="zyro-image (7) (1).png" id="look" class="look"></img> 
<!-- 点击/激活时改变div透明度的img元素 -->

CSS样式 #

.scene{
    font-family: 'Common Pixel', sans-serif; 
    background-color:black; 
    border: 2px; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 25px; 
    width: 350px; 
    opacity: 0;
}

/* -------------------- */

.look{
    height: 100px;
    position: relative;
    left: 10px;
    top: -685px;
    margin-top: auto;
    z-index: 1;
    transition: top, 1s;
}

.look:hover{
    top: -692px;
}

已尝试的无效方法 #

这些方法大多来自Stack Overflow：

1. jQuery方法

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script>
$('.look').active(function(){
  $('.scene').css('opacity', '1');
 });
</script>

无任何变化，无效。

2. 切换类名方法

<script>
    function myFunction()
    {
        document.getElementById('scene').setAttribute("class", "scene2");
    }
</script>

.scene2{
    font-family: 'Common Pixel', sans-serif; 
    background-color:black; 
    border: 2px; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 25px; 
    width: 350px;
    opacity: 1;
}

无任何变化，无效。

3. 直接修改style.cssText方法

<script>
        function change_css(){
            document.getElementById('result').style.cssText = 'font-family:'Common Pixel', sans-serif; background-color:black; border:2px; color:white; padding-top:10px; padding-bottom:25px; width:350px; opacity:1;';
        }
    </script>

无效。

解决方案 #

一、原生JavaScript实现（推荐） #

之前的方法要么事件绑定错误，要么元素选择出错，直接给img绑定点击事件修改透明度即可：

<script>
// 获取目标元素
const lookImg = document.getElementById('look');
const sceneDiv = document.getElementById('scene');

// 绑定点击事件，支持切换透明度
lookImg.addEventListener('click', function() {
    sceneDiv.style.opacity = sceneDiv.style.opacity === '1' ? '0' : '1';
    // 若只需点击一次设置为不透明，直接写：sceneDiv.style.opacity = '1';
});
</script>

二、jQuery实现 #

之前误用了.active()方法，正确的点击事件是.click()：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.look').click(function(){
    $('.scene').css('opacity', '1');
    // 支持切换的写法：$('.scene').css('opacity', $('.scene').css('opacity') === '1' ? '0' : '1');
});
</script>

三、纯CSS实现（无需JS，仅支持点击保持状态） #

用隐藏的checkbox配合兄弟选择器实现，适合不需要复杂逻辑的场景：

<!-- 新增隐藏的checkbox -->
<input type="checkbox" id="toggleScene" style="display: none;">

<!-- 将img包裹在label中，绑定到checkbox -->
<label for="toggleScene" class="look">
    <img src="zyro-image (7) (1).png" id="look-img">
</label>

<div class="scene" id="scene">the text</div>

修改对应CSS：

.scene{
    font-family: 'Common Pixel', sans-serif; 
    background-color:black; 
    border: 2px; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 25px; 
    width: 350px; 
    opacity: 0;
    transition: opacity 0.3s; /* 可选：添加过渡动画 */
}

/* checkbox选中时，修改scene的透明度 */
#toggleScene:checked ~ .scene {
    opacity: 1;
}

.look{
    height: 100px;
    position: relative;
    left: 10px;
    top: -685px;
    margin-top: auto;
    z-index: 1;
    transition: top 1s;
    cursor: pointer; /* 提示可点击 */
}

.look:hover{
    top: -692px;
}

#look-img {
    height: 100%;
}

之前方法无效的原因 #

• 方法1：.active()不是jQuery的点击事件方法，正确的点击事件应该用.click()。
• 方法2：没有给img绑定触发myFunction的事件（比如加onclick="myFunction()"），且用setAttribute替换类名会覆盖原有样式，建议用classList.add("scene2")或classList.toggle("scene2")。
• 方法3：元素ID写错（用了result而非scene），且字符串中的单引号未转义，导致语法错误。

内容的提问来源于stack exchange，提问作者Chaduss Sussusman Kid Amogus