如何在 javascript 中添加和删除图像上的边框

How do I add and remove a border on image in javascript

本文关键字：图像 删除 边框 添加 javascript      更新时间：2023-09-26

onclick方法存在问题，我希望删除所有图片上的边框，单击新图片时除外

错误

是：未捕获的类型错误：对象不是函数在线： images（i）.style.display = "none";

<!DOCTYPE html>
<html>
<head>
</head>
<title></title>
<script>
    var images = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg', '06.jpg', '07.jpg', '08.jpg', '09.jpg', '10.jpg', 
                  '11.jpg', '12.jpg', '13.jpg', '14.jpg', '15.jpg', '16.jpg', '17.jpg', '18.jpg', '19.jpg', '20.jpg',
                  '21.jpg', '22.jpg', '23.jpg', '24.jpg', '25.jpg', '26.jpg', '27.jpg', '28.jpg', '29.jpg', '30.jpg',
                  '31.jpg', '32.jpg', '33.jpg', '34.jpg', '35.jpg', '36.jpg', '37.jpg', '38.jpg', '39.jpg', '40.jpg'];
    var end = 'cross.jpg';
    //to change index in array to display
    var first = 0;
    var last = 4;

    //sets border on image
    function setUpImage(i){
        var img = document.createElement('img')
        img.src = images[i];
        //adds image to screen
        document.getElementById('content').appendChild(img);
        img.onclick = function(){
            //if it doesnt have a border
            if(img.style.border != "10px solid blue"){
            //puts a blue border around image
            img.style.border = "10px solid blue";
            //add padding
            img.style.padding = "10px 10px 10px 10px";
            for(var i=0; i<=images.length; i++){
                images(i).style.display = "none";
            }
            }
        }
    }
</script>
<style>
#content{
width: 600px;
}
</style>
<body onload="buildImage();">
    <div id="content"></div>
       <button id="button" onclick="addImages()">More</button>
</body>

你的问题是你实际上并没有选择 img 元素，而是选择了 images[] 数组中的字符串，你需要给你的图像一个 id，以便你以后可以选择它们，然后像以前一样遍历它们，就像这样： 

    //sets border on image
function setUpImage(i){
    var img = document.createElement('img')
    img.src = images[i];
    img.id = images[i];
    //adds image to screen
    document.getElementById('content').appendChild(img);
    img.onclick = function(){
        //if it doesnt have a border
        if(img.style.border != "10px solid blue"){
        for(var i=0; i<=images.length; i++){
            document.getElementById(image[i]).style.border = "initial";
        }
        //puts a blue border around image
        img.style.border = "10px solid blue";
        //add padding
        img.style.padding = "10px 10px 10px 10px";
        }
    }
}

但是，我只会使用一个 onclick 函数重新评论，并将此功能提供给每个图像的 onclick 事件，如下所示：

    function imgClick(el){
        //if it doesnt have a border
        if(el.style.border != "10px solid blue"){
        for(var i=0; i<=images.length; i++){
            document.getElementById(image[i]).style.border = "initial";
        }
        //puts a blue border around image
        el.style.border = "10px solid blue";
        //add padding
        el.style.padding = "10px 10px 10px 10px";
        }
    }

和 

//sets border on image
function setUpImage(i){
    var img = document.createElement('img')
    img.src = images[i];
img.id = images[i];
    //adds image to screen
    document.getElementById('content').appendChild(img);
    img.onclick = imgClick(this);
}

你可以方便地使用querySelectorAll和CSS类。在您的 CSS 中：

img.bordered { border: 1px solid black; }

然后你在 JavaScript 中通过以下方式使用这个类：

function clickHandler(evt) {
  var container = ... || document.body;
  var thisImage = evt.target;
  var allImages = topelement.querySelectorAll("img");
  // this is a NodeList, we want an array, so we convert:
  allImages = [].slice.call(allImages);
  allImages.forEach(function(img) {
    if(img===thisImage) 
      return img.classList.remove("bordered");
    img.classList.add("bordered");
  });
}

然后，您将该函数绑定为 HTML 格式：

<img src="..." onclick="clickHandler">

或者在创建元素时在 JS 中：

...
var img = document.createElement("img");
img.addEventListener("click", clickHandler);
img.src = ...;
container.appendChild(img);
...

做。现在，所有图像都有一个 CSS 类，该类提供比边框，除非它是您单击的图像，在这种情况下，边框类将被删除。（如果删除不存在的类，则不会发生任何操作，如果添加已存在的类，也不会发生任何操作）。

请注意，container var，它应该是容纳要切换的所有图像的元素。通常，您不希望将其应用于页面上的每个可能的图像，而只是将一组特定的图像应用于。

相关文章：