有时候,一些很小的东西,去使用jquery之类的库显得太麻烦了,仍是用原生js来得简洁。node
原生js获取元素,并获取元素的内部元素列表jquery
var li_list = window.document.getElementById('img_list').children;
for(var i =0; i < li_list.length ; i++){
var img_list = li_list[i].children;
for(var j=0;j<img_list.length;j++){
if(img_list[j].nodeName.toLowerCase() == 'img'){
img_list[j].addEventListener('click',function(){
document.getElementById("view").setAttribute('content','width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes');
document.getElementById('show_gallery').innerHTML = '<img src="' + this.getAttribute('big_img') + '" />';
document.getElementById('show_gallery').style.display = 'flex';flex
})
}
}
}this
原生js为元素添加事件:scala
img_list[j].addEventListener('click',function(){
document.getElementById("view").setAttribute('content','width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes');
document.getElementById('show_gallery').innerHTML = '<img src="' + this.getAttribute('big_img') + '" />';
document.getElementById('show_gallery').style.display = 'flex';事件
}) get
//原生js操做元素样式,改变元素内容it
document.getElementById('show_gallery').innerHTML = '<img src="' + this.getAttribute('big_img') + '" />';
document.getElementById('show_gallery').style.display = 'flex';io