练习一些window中的方法和属性

最新推荐文章于 2022-09-01 17:30:05 发布

Byte_Dance

最新推荐文章于 2022-09-01 17:30:05 发布

阅读量289

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Byte_Dance/article/details/79113241

版权

JS 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window中的方法和属性</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #buttondemo {
            position: fixed;
            background: yellow;
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin: 0;
            padding: 0;
            top: 0;
            left: 0;
        }
        span {
            color: red;
        }
    </style>
</head>
<body>
<div id="buttondemo">
    <button id="newwindow"><span>新建</span>一个窗口</button>
    <button id="closewindow"><span>关闭</span>新建的窗口</button>
    <button id="zuobiao"><span>moveTo</span> 移动窗口坐标到那个位置</button>
    <button id="yidong"><span>moveBy</span> 坐标移动多少像素</button>
    <button id="daxiao"><span>resizeTo</span>像素固定到多少像素</button>
    <button id="zhiding"><span>resizeBy</span>按照指定像素进行叠加</button>
    <button id="gundong"><span>scrollBy</span>滚动条到指定像素</button>
    <button id="gundao"><span>scrollBy</span>滚动条按照指定像素叠加</button>
</div>

<script type="text/javascript">
    //新建一个窗口
    document.getElementById("newwindow").onclick = function () {
        //使用open方法新建一个窗口
        ck = window.open("", "", "top=0px,left=0px,width=400px,height=400px");
        //向新打开的窗口中写入ul和li列表标签
        ck.document.write("<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li> <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li></ul>");
    }
    //关闭新建的窗口
    document.getElementById("closewindow").onclick = function () {
        //使用close()方法关闭新建的窗口
        ck.close();
    }
    //把窗口坐标移动到桌面上的指定像素,左边值为left ,右边值为top,坐标是固定的
    document.getElementById("zuobiao").onclick = function () {
        ck.moveTo(300, 300);
    }

    //给窗口坐标移动多少个像素,按照指定的值,点一次叠加
    document.getElementById("yidong").onclick = function () {
        ck.moveBy(30, 30);
    }
    //对窗口的长宽像素调整到指定像素
    document.getElementById("daxiao").onclick = function () {
        ck.resizeTo(600, 600);
    }
    //给窗口坐标调整多少个像素,按照指定的值,
    document.getElementById("zhiding").onclick = function () {
        ck.resizeBy(-30, -30);
    }
    //对窗口滚动条移动到指定的像素
    document.getElementById("gundong").onclick = function () {
        ck.scrollTo(300, 300);
    }
    //给窗口滚动条调整多少个像素,按照指定的值,
    document.getElementById("gundao").onclick = function () {
        ck.scrollBy(30, 30);
    }
</script>
</body>
</html>

以下是W3School

Window 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。请参阅 Document 对象。
history	对 History 对象的只读引用。请参数 History 对象。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。
window	window 属性等价于 self 属性，它包含了对窗口自身的引用。
screenLeft screenTop screenX screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

Byte_Dance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
练习一些window中的方法和属性

html>lang="en"> charset="UTF-8"> window中的方法和属性 body { margin: 0; padding: 0; } #buttondemo { position: fixed; ba
复制链接

扫一扫

专栏目录