首页 > 代码库 > 样式操作
样式操作
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type ="text/css"> #areaPlay { border :1px solid #000; width :500px; height :400px; margin :50px auto ; z-index:9999999;/**越大越上面 只对绝对布局有效*/ position :absolute;/**绝对定位*/ background-color:#fff; left :200px; top:200px; } #showdow { border :1px solid #000; width :100%; height:700px; position :absolute;/**绝对定位*/ left :2px; top:2px; background-color:#808080; opacity:0.4;/**透明度*/ z-index:9999998;/**越大越上面 只对绝对布局有效*/ } .show { display:block; } .hid { display:none; } </style> <script src="http://www.mamicode.com/Scripts/jquery-1.8.2.min.js"></script> <script type ="text/javascript"> $(function () { $("#showdow").addClass("hid"); }); function trunOff() { // $("#showdow").addClass("show"); // $("#showdow").attr("class","show"); $("#showdow").toggleClass("hid");//内部判断hid样式是否存在如果有就移除，如果没有就加进去 } function trunOff() { $("#showdow").toggleClass("hid");//切换样式 } </script></head><body> <a href="javascript:trunOff()" >关灯</a> <div id="areaPlay">播放区域 <a href="javascript:trunOff()">开灯</a> </div> <input type ="text" /> <div id="showdow" class="hid"></div></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。