码迷,mamicode.com
首页 > 其他好文 > 详细

自定义属性和充满屏幕

时间:2020-03-08 14:00:21      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:NPU   line   png   add   字符   idt   class   pre   自定义属性   

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
       <div>
           <img src="././../../../数据库/图片//png图片//bilibili.png" alt="">
       
        <input type="button" id="full" value="全屏">
        <input type="button" id="noFull" value="退出全屏">
        <input type="button" id="isFull" value="是否是全屏">
       </div>
        <script>
         window.onload=function(){
             var div=document.querySelector("div");
             document.querySelector("#full").onclick=function(){
                if(div.webkitRequestFullScreen){
                    div.webkitRequestFullScreen();
                }else if(div.msRequestFullScreen){
                    div.msRequestFullScreen();
                }else if(div.mozRequestFullScreen){
                    div.mozRequestFullScreen();
                }else{
                    div.requestFullScreen();
                }
             }
          
            //  document.querySelector("#noFull").onclick=function(){
            //      div.cancelFullScreen();
            //  }
             
            //  document.querySelector("#isFull").onclick=function(){
            //      div.fullScreenElement();
            //  }
         } 
        </script>
</body>
</html> 
<!--
1.requestFullScreen();开启全屏显示  不同浏览器不同的前缀 firebox :moz IE:ms spera:o
2.cancelFullScreen();关闭全屏显示
3.fullScreenElement();是否是全屏状态


 <!-- 网络接口
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //ononline当网络连接的时候触发
    window.addEventListener("online",function(){
        alert(‘有网‘);
    });    
    //onoffline 无网的时候触发
    window.addEventListener("offline",function(){
        alert(‘没网‘);
    }); 
    </script>
</body>
</html>

 

<!--自定义属性 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <p data-school-name="itcast">王星宇</p>

    <script> 
     window.onload=function(){
         var p=document.querySelector(‘p‘);
         var  value=p.dataset["schoolName"];
         console.log(value);
     }
    </script>
</body>
</html> 


    dete-开头 date-后至少有一个字符,多个单词使用-连接

 

自定义属性和充满屏幕

标签:NPU   line   png   add   字符   idt   class   pre   自定义属性   

原文地址:https://www.cnblogs.com/wxy0715/p/12442082.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!