ユーザーがクリックしたときに画像を強調表示

Question

ユーザーがクリックした画像に「パディング」、「背景」、「枠線」のJavaScriptスタイルを追加したいハイライトエフェクトが削除されます。

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 
} 

Answer 1

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();

を

Answer 2

のjQueryを使用して

highlighted { 
    padding: '3px'; 
    backgroundColor: '#eded01'; 
    borderSize: '1ps'; 
    borderStyle: 'dashed'; 
    borderColor: '#0001fe' 
} 

CSSクラスを作成します。

var $element = $('#elementid'); 
$element.click(function() { 
    $(this).toogleClass('highligted'); 
});