自定义属性和充满屏幕

Posted wxy0715

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义属性和充满屏幕相关的知识，希望对你有一定的参考价值。

 <!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-后至少有一个字符,多个单词使用-连接

 

以上是关于自定义属性和充满屏幕的主要内容，如果未能解决你的问题，请参考以下文章

带有圆角而不是 100% 屏幕宽度的自定义片段对话框

Xcode自定义代码块

VS code自定义用户代码片段snippet

为动态创建的 Android 片段提供自定义属性值

iOS Button 在自定义视图中不起作用

如何使图片充满整个电脑屏幕?