首页 > 代码库 > 实际项目中积累的一些关于事件的简单应用JS代码段（能力有限，不喜轻喷，23333）
实际项目中积累的一些关于事件的简单应用JS代码段（能力有限，不喜轻喷，23333）
1：鼠标移入图片显示另一张图片
var yuanquan_1 = document.getElementById("yuanquan_1" );
yuanquan_1. onmouseover = function () {
yuanquan_1.src = "img/youhuigoujiu-2.png";
}
yuanquan_1. onmouseout = function () {
yuanquan_1.src = "img/youhuigoujiu.png";
}
2：点击元素显示内容，在点击该元素隐藏内容
vartu_add_icon=document.getElementById("tu-add-icon");
var tu_ul = document.getElementById("tu-ul" );
tu_add_icon.addEventListener( "click",function () {
if (tu_ul.style .display==‘none‘ ) {
tu_ul. style.display = ‘block‘;
} else{
tu_ul. style.display = ‘none‘;
}
})
3：单选框radio切换
var man = document .getElementById("man");
var woman = document .getElementById("woman");
man. onclick = function () {
man.checked = true;
woman.checked = false;
}
woman. onclick = function () {
woman.checked = true;
man.checked = false;
}
注：把input的type和name属性都设置为radio的时候可以直接有切换的效果
4：循环添加移入移出事件
var zizhi = document.getElementsByClassName("zizhi" );
for(var i = 0 ; i<zizhi.length;i ++){
zizhi[i].addEventListener( "mouseover",function (){
this.style.width = "600px";
this.style .height = "600px" ;
this.style. position = "absolute" ;
this. style.top = 0;
})
}
for(var i = 0 ; i<zizhi.length;i ++){
zizhi[i].addEventListener( "mouseout",function (){
this.style.width = "200px";
this.style .height = "200px" ;
this.style. position = "static" ;
})
}
5：点击选框全选
function quanXuan(){
var tu_li_quanxuan = document.getElementById("checkAll" );
var duo_xuan = document.getElementsByClassName("tu-input" );
var type = tu_li_quanxuan.checked;
if(type){
for (var i = 0 ; i < quan_xuan.length; i ++) {
if (quan_xuan[i].type == ‘checkbox‘) {
quan_xuan[i].checked = true ;
}
}
} else{
for (var i = 0 ; i < quan_xuan.length; i ++) {
if (quan_xuan[i].type == ‘checkbox‘) {
quan_xuan[i].checked = false ;
}
}
}
}
实际项目中积累的一些关于事件的简单应用JS代码段（能力有限，不喜轻喷，23333）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。