Js和Jquery动态添加删除类

来源：互联网发布：mac 删除office 编辑：程序博客网时间：2024/06/05 04:56

Js和Jquery动态添加删除节点和类

导语：

本节介绍Js和Jquery动态添加删除节点、类的方法。

js方法：createElement、appendChild、removeChild、setAttribute、getAttribute

var overlay = document.createElement("div");//创建节点overlay.setAttribute("id","overlay");//添加id属性overlay.setAttribute("class","overlay");//添加class属性img.src = this.getAttribute("src");//获取src属性内容document.body.appendChild(overlay);//添加节点document.body.removeChild(document.getElementById("img"));//移除节点

jquery方法：removeClass、addClass、attr

$("#overlay").removeClass("displaynone");//移除类$("#overlay").addClass("overlay");//添加类$("#overlayimage").attr('src',this.getAttribute("src"));//添加属性

demo完整代码Jquery：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/><title>点击图片显示大图无图片Jquery</title><script src="js/jquery-3.2.1.min.js"></script><style>    img{padding:5px;width:100px;height:auto;}    #outer{        width:100%;        height:100%;    }    .overlay{        display: block;        background-color:#000;        opacity: .7;        filter:alpha(opacity=70);        position: fixed;        top:0;        left:0;        width:100%;        height:100%;        z-index: 10;    }    .overlayimg{        position: absolute;        z-index: 11;        left:50px;        top:30px;        width:auto;    }    .displaynone{        display:none;    }</style><script>    function expandPhoto(){       $("#overlay").removeClass("displaynone");       $("#overlay").addClass("overlay");       $("#overlayimage").attr('src',this.getAttribute("src"));       $("#overlayimage").onclick=restore();    }    function restore(){        $("#overlay").addClass("displaynone");        $("#overlay").removeClass("overlay");    }    window.onload = function(){        var imgs = document.getElementsByTagName("img");        imgs[0].focus();        for(var i = 0;i<imgs.length;i++){            imgs[i].onclick = expandPhoto;            imgs[i].onkeydown = expandPhoto;        }    }</script></head> <body><div id = "outer"><p>点击图片</p><img src="http://e.hiphotos.baidu.com/image/pic/item/77094b36acaf2edde7684cc38e1001e93901937a.jpg" /><img src="http://e.hiphotos.baidu.com/image/pic/item/77094b36acaf2edde7684cc38e1001e93901937a.jpg" /></div><div id="overlay" class="displaynone"><img class="overlayimg" id="overlayimage"/></div></body></html>

demo完整代码Js：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/><title>点击图片显示大图无插件JS</title><style>    img{padding:5px;width:100px;height:auto;}    #outer{        width:100%;        height:100%;    }    .overlay{        background-color:#000;        opacity: .7;        filter:alpha(opacity=70);        position: fixed;        top:0;        left:0;        width:100%;        height:100%;        z-index: 10;    }    .overlayimg{        position: absolute;        z-index: 11;        left:50px;        top:30px;        width:auto;    }</style><script>    function expandPhoto(){        var overlay = document.createElement("div");        overlay.setAttribute("id","overlay");        overlay.setAttribute("class","overlay");        document.body.appendChild(overlay);        var img = document.createElement("img");        img.setAttribute("class","overlayimg");        img.src = this.getAttribute("src");        document.getElementById("overlay").appendChild(img);        img.onclick = restore;    }    function restore(){        document.body.removeChild(document.getElementById("overlay"));        document.body.removeChild(document.getElementById("img"));    }    window.onload = function(){        var imgs = document.getElementsByTagName("img");        imgs[0].focus();        for(var i = 0;i<imgs.length;i++){            imgs[i].onclick = expandPhoto;            imgs[i].onkeydown = expandPhoto;        }    }</script></head><body><div id = "outer"><p>点击图片</p><img src="http://e.hiphotos.baidu.com/image/pic/item/77094b36acaf2edde7684cc38e1001e93901937a.jpg" /><img src="http://e.hiphotos.baidu.com/image/pic/item/77094b36acaf2edde7684cc38e1001e93901937a.jpg" /></div></body></html>

阅读全文

0 0