Question

在我的javascript代码中，我想在隐藏第一张图片以显示绿色边框后定位图像元素？代码似乎运行没有错误输出？我错过了什么？

这是html：

<img src="black_cat.jpg" alt="Profile Pic" height="300" width="300" id="profile_pic"></img>
    <img src="white_cat.jpg" alt="Profile Pic" height="300" width="300" id="next_profile"></img>
    <img src="" alt="Swipe Left" height="150" width="150" id="swipe_left" onclick="hide_profile(); show_profile(); update_pic('swipe_left');"></img>
    <img src="" alt="Swipe Right" height="150" width="150" id="swipe_right" onclick="hide_profile(); show_profile(); update_pic();"></img>
    <p id="display_message"></p>

这是javascript代码：

function hide_profile() {
        document.getElementById("profile_pic").style.visibility = "hidden";
    }

function show_profile() {
    document.getElementById("next_profile").style.display = "block";
    document.getElementById("next_profile").style.visibility = "visible";
    document.getElementById("profile_pic").style.display = "none";
}

function update_pic(id) {
    if (id == 'swipe_left') {
        document.getElementById("display_message").innerHTML = "You didn\'t Like this Cat!";
        document.getElementById("next_profile").style.borderColor = "green";
    } else {
        document.getElementById("display_message").innerHTML = "You Liked this Cat!";
    }
}

Answer 1

这是因为您指定了颜色而不是尺寸。您可以使用border属性同时设置颜色，大小和样式。

function hide_profile() {
  document.getElementById("profile_pic").style.visibility = "hidden";
}

function show_profile() {
  document.getElementById("next_profile").style.display = "block";
  document.getElementById("next_profile").style.visibility = "visible";
  document.getElementById("profile_pic").style.display = "none";
}

function update_pic(id) {
  if (id == 'swipe_left') {
    document.getElementById("display_message").innerHTML = "You didn\'t Like this Cat!";
    document.getElementById('next_profile').style.border = 'solid 1px green';
  } else {
    document.getElementById("display_message").innerHTML = "You Liked this Cat!";
  }
}

<img src="https://placekitten.com/300/300" alt="Profile Pic" height="300" width="300" id="profile_pic"></img>
<img src="https://placekitten.com/300/300" alt="Profile Pic" height="300" width="300" id="next_profile" />
<img src="" alt="Swipe Left" height="150" width="150" id="swipe_left" onclick="hide_profile(); show_profile(); update_pic('swipe_left');" />
<img src="" alt="Swipe Right" height="150" width="150" id="swipe_right" onclick="hide_profile(); show_profile(); update_pic();" />
<p id="display_message"></p>

Answer 2

您需要添加其他边框样式，包括宽度和样式

function hide_profile() {
        document.getElementById("profile_pic").style.visibility = "hidden";
    }

function show_profile() {
    document.getElementById("next_profile").style.display = "block";
    document.getElementById("next_profile").style.visibility = "visible";
    document.getElementById("profile_pic").style.display = "none";
}

function update_pic(id) {
    if (id == 'swipe_left') {
        document.getElementById("display_message").innerHTML = "You didn\'t Like this Cat!";

        // look here!
        document.getElementById("next_profile").style.border = "1px solid green";

    } else {
        document.getElementById("display_message").innerHTML = "You Liked this Cat!";
    }
}

小提琴：https://jsfiddle.net/dmpts000/

Javascript：更改图像元素的边框颜色？

2 个答案: