当用户点击图片时在页面上突出显示图片

debugcn 发表于 Dev

艾玛

我想用 JavaScript 添加 CSS 样式：“填充”、“背景”和“边框”到用户单击的图像，当用户再次单击该图像时，高亮效果将被删除。

var imagesProp = {
  'padding': '3px',
  'backgroundColor': '#eded01',
  'borderSize': '1ps',
  'borderStyle': 'dashed',
  'borderColor': '#0001fe'
};

function highlightimages() {
  var allimages = document.getElementsByid('images');
//How do i start from here
}

让我们

var imagesProp = {
  'padding': '3px',
  'backgroundColor': '#eded01',
  'borderSize': '1ps',
  'borderStyle': 'dashed',
  'borderColor': '#0001fe'
};

function highlightImages() {
  //You do not use getElementsByid but getElementsByTagName 
  var allimages = document.getElementsByTagName('img');
  var nrallimgs = allimages.length;

  // traverses the <img> elements, and register onclick to each one
  // else, apply the properties defined in $imagesProp
  for(i=0; i<nrallimgs; i++) {
    allimages[i].onclick=function() {
   
      if(this.style.borderStyle == imagesProp.borderStyle) {
        this.style.padding = 'auto';
        this.style.background = 'none';
        this.style.border = 'none';
      }
      else {
        this.style.padding = imagesProp.padding;
        this.style.backgroundColor = imagesProp.backgroundColor;
        this.style.borderSize = imagesProp.borderSize;
        this.style.borderStyle = imagesProp.borderStyle;
        this.style.borderColor = imagesProp.borderColor;
      }
    }
  }
}

// calls the highlightImages() function to apply the effect
highlightImages();

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。