那天在公司遇见一个实现全屏的效果。
今天有空记录一下，如何使用原生js。实现全屏的效果。
再次回顾原生js,犹如遇见一个陌生人。
发现好多的方法，我早已忘记，留下的就只有好像这个方法我曾经用过。
但是具体是用来干嘛的，我已经忘记了哈哈
如果在页面上找不到某一个id值。那么将返回null。
比如说页面上没有这个id,myid;那么将返回null哈
var allImg = document.getElementById("myid");
经验总结--删除某个元素前，要判断这个元素是否存在。否者代码会报错。
下面这一段代码是不健壮的哈。因为有一个判断
if (e.which == 27) { var allImg = document.getElementById("myid"); //如果这个元素用户已经删除了，然后用户多次按下esc。那么这一段代码就会报错哈。所以需要判断一下，这个元素是否存在 allImg.remove(); //删除自身 start.style.display = "block"; }
需求描述：点击按钮：屏幕上最初的内容消失，然后图片变成全屏的哈
然后按下esc键。全屏效过消失。变成最初的效果
html, body { height: 100%; height: 100%; overflow: hidden; } #app { height: 100%; } * { padding: 0; margin: 0; } .img-size { width: 130px; height: 130px; background-size: 100%; }
<div id="app"> <div id="start"> <h1>哈哈，我是内容</h1> <img class="img-size" src="../dm.jpg"> <button id="btn">全屏图片</button> </div> </div> <!-- 需求描述：点击按钮：屏幕上最初的内容消失，然后图片变成全屏的哈 --> <script> let btn = document.getElementById("btn"); btn.onclick = function () { // 屏幕上最初的的内容消失 let start = document.getElementById("start"); start.style.display = "none"; var app = document.getElementById("app"); var myElement = document.createElement("div"); //创建一个元素标签 // var myElement = document.createElement("<h1>aqq</h1>");这样的写法错误的 //设置 这个元素标签的属性 myElement.setAttribute("id", "newDiv"); //添加内容 myElement.innerHTML = "<img src='../dm.jpg' id='myid'>"; app.appendChild(myElement); //添加到id为app这个元素，里面的最后 //监听用户的键盘事件 document.addEventListener('keydown', function (e) { if (e.which == 27) { var allImg = document.getElementById("myid"); console.log("不存在时", allImg, "返回null哈") //如果这个元素用户已经删除了，然后用户多次按下esc。那么这一段代码就会报错哈。 //如何判断某个元素是否存在呢？ if (allImg) { allImg.remove(); //删除自身 } start.style.display = "block"; } }); } </script>
uploading-image-313445.png
