1 <select name="" id="mySelect"> 2 <option value="">我不相信</option> 3 </select> 4 <!-- <iframe src="" frameborder="0"></iframe> --> 5 <div id="wrap" class="wrap"> 6 iframe 可以覆盖 select 7 </div>
1 select{width: 160px;height: 20px;float: left;} 2 .wrap{position: relative;z-index: 99;width: 400px;height: 400px;background: red;margin-left: -100px;float: left;}
1 var iframe = document.createElement("iframe"), wrap = document.getElementById("wrap"); 2 document.body.insertBefore(iframe, wrap); 3 css(iframe,{position: "absolute",left: "60px","z-index": 98, "400px",height: "400px",background: "#000"}); 4 5 function css(obj, attr, value){ 6 switch(arguments.length){ 7 case 2: // 两个参数是获取css样式 8 if(typeof arguments[1] === "object"){ // 两个参数,如果第二个参数是对象 则批量设置属性 9 for(var p in attr){ 10 obj.style[p] = attr[p]; 11 } 12 }else{ 13 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]; 14 } 15 break; 16 case 3: 17 // 3 个参数 : 设置属性 18 obj.style[attr] = value; 19 break; 20 default : 21 alert("参数错误"); 22 } 23 }
以上用js写,只是为了练习一下,可以直接iframe 写到页面里,css设置即可