1. 程式人生 > >JS:window物件的pageXOffset、innerWidth、outerWidth、screenLeft、screenX

JS:window物件的pageXOffset、innerWidth、outerWidth、screenLeft、screenX

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>鬼眼邪神的部落格</title>
        <meta name="author" content="鬼眼邪神"/>
        <meta name="description" content="鬼眼邪神的部落格,http://blog.csdn.net/u010200222"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            html {
                margin:20px;
                padding:20px;
                width:600px;
                border:10px solid #000;
            }
            body {
                margin:0 0 0 100px;
                width:400px;
                height:800px;
                border:5px solid #000;
                background:yellow;
                overflow:scroll;
            }
            .green {
                position:relative;
                margin:50px auto;
                padding:20px;
                width:80px;
                height:80px;
                border:10px solid #000;
                background:rgb(0,255,0);
            }
            .con {
                margin:0 auto;
                width:380px;
            }
        </style>
        <script>
            (function(){
                window.onload=function (){
                    var con=document.getElementById("con");
                    var green=document.getElementById("green");
                    var body=document.getElementById("body");
                    document.onclick=function (event){
                        var event=window.event||event;
                        con.innerHTML=
                            "window.pageXOffset="+window.pageXOffset+","+
                            "window.pageYOffset="+window.pageYOffset+"<br/>"+
                            "window.innerWidth="+window.innerWidth+","+
                            "window.innerHeight="+window.innerHeight+"<br/>"+
                            "window.outerWidth="+window.outerWidth+","+
                            "window.outerHeight="+window.outerHeight+"<br/>"+
                            "window.screenLeft="+window.screenLeft+","+
                            "window.screenTop="+window.screenTop+"<br/>"+
                            "window.screenX="+window.screenX+","+
                            "window.screenY="+window.screenY+"<br/>";
                    }
                }
            })();
        </script>
    </head>

    <body>
        <div class="green" id="green">
            <div class="red"></div>
        </div>
        <div class="con" id="con"></div>
    </body>
</html>

相關推薦

JSwindow物件pageXOffsetinnerWidthouterWidthscreenLeftscreenX

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>鬼眼邪神的部落格</title> <meta name

javascript基礎window物件的screen屬性移動視窗縮放視窗

window物件的screen屬性,也是一個物件,包含了關於螢幕的解析度,以及可視的長寬。 通過window物件的moveTo,resizeTo 函式,可以指定瀏覽器程式在螢幕上顯示的x、y座標,以及視窗的長寬,moveBy和resizeBy函式是相對於當前瀏覽器位置做移動

java基礎鞏固系列(九)持有物件之間的使用與關係(IterableCollectionListQueueSetMapStack)

總:Java提供了一套比較完整的容器類,基本型別是:List、Set、Queue、Map,這些物件型別稱為集合類。 一、介面繼承關係: Iterable介面,在java.lang包中,Collection、List、Queue、Set介面繼承Iterable介面 可以

HTMLjsWindow物件的常用屬性screen物件

Window物件的常用屬性:      screen:有關客戶端的螢幕和顯示效能的資訊      history:有關客戶訪問過的URL的資訊      location:有關當前URL的資訊      closed:當視窗關閉是為真      document:視窗中當前

jswindow物件與方法

一、window物件   window物件 是BOM中所有物件的核心。BOM    Browser  Object Model 二、window屬性     1.(位置型別-獲得瀏覽器的位置)       IE:        window.screenLeft    

JS面向物件程式設計(一)

Declare JavaScript Objects as Variables 在我們深入 面向物件程式設計之前 ,讓我們先回顧一下Javascript的 物件(Object) Construct JavaScript Objects with Functions 除了上一種方

jswindow物件(慕課網學習筆記)

javaScript定義了一個變數一個函式都會變成window中的一個成員 var a=1; alert(window.a) //會輸出a的值 window基礎 建立視窗、調整視窗、移動視窗、關閉視窗 <!DOCTYPE html> <html lang

JS 使用 window物件的print方法實現分頁列印

最近做專案用到了web線上列印功能,經研究使用了JS自身支援的Window物件的列印方法,此種方法相容性比較好,在IE和火狐瀏覽器下使用都沒有問題。但是網上好多案例都不支援分頁功能,最後通過CSS的page-break-after:always樣式解決分頁問題,以下程式碼純

JS判斷物件相等 物件深度克隆

在JS中可以使用"=="和"==="來判斷兩個變數是否相等。"=="只判斷兩個變數值是否相等,不判斷型別是否相等,如果"=="兩邊的變數型別不同,則會先進行隱式型別轉換,嘗試將兩個變數都轉換為"=="左邊的型別,再判斷值是否相等。"==="則必須兩個變數的型別和值全都相等才判

讀書筆記----jswindow物件

1.     setTimeout()  指定一個函式在指定的毫秒數之後執行,單詞呼叫。 2.     setInterval() 重複呼叫函式 3.     location 表示該視窗中當前顯示的文件的URL,並定義了方法使視窗載入新的文件 window.locatio

javascript基礎window物件定時器

程式碼: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <

【學習筆記】六面向物件的程式設計——理解JS中的物件屬性建立物件JS中的繼承

  ES中沒有類的概念,這也使其物件和其他語言中的物件有所不同,ES中定義物件為:“無序屬性的集合,其屬性包含基本值、物件或者函式”。現在常用的建立單個物件的方法為物件字面量形式。在常見多個物件時,使用工程模式的一種變體。 1.理解物件   1)物件的屬性分兩種:資料屬性和訪問器屬性,每個型別的屬性都具有

JSbody元素物件的clientWidthoffsetWidthscrollWidthclientLeftoffsetLeftscrollLeft

document.body.clientWidth 獲取body元素物件的內容可視區域的寬度,即clientWidth=width+padding,不包括滾動條。 document.body.clientHeight 獲取body元素物件的內容可視區域的高度,即clientHeight=height+padd

javascript學習筆記——BOM的物件window(核心)locationhistory

1.window物件  1.1 全域性作用域 BOM的核心物件是window,它表示瀏覽器的例項; 在瀏覽器中,window物件既是通過js訪問瀏覽器視窗的一個介面,又是ES規定的Global物件;  所有在全域性作用域中宣告的變數、函式都會變成window物件

js字串 String物件的方法 + 半形空格全形空格

一、String 物件方法 方法 描述 big() 用大號字型顯示字串。 使用粗體顯示字串。 返回在指定的位置的字元的 Unicode 編碼。 以打字機文字顯示字串。 檢索字串。indexOf(“字串”),返回

JSdocument.documentElement物件的clientWidthoffsetWidthscrollWidthclientLeftoffsetLeftscrollLeft

document.documentElement.clientWidth 獲取瀏覽器視窗文件顯示區域的寬度,不包括滾動條。 document.documentElement.clientHeight 獲取瀏覽器視窗文件顯示區域的高度,不包括滾動條。 瀏覽器相容性 所有瀏覽器解釋都一樣。 document.d

Node.js URLQueryString介紹

反序列化 url地址 字符 cap arc format 一個 定位符 成對 URL網址解析 url: 統一資源定位符,字母,數字,文字需編碼uri: 統一資源標識符,字符串格式規範 註:url 是 uri 的子集 url.parse (urlString, bool,

JS遞歸基礎及範例——斐波那契數列 楊輝三角

求解 調用 size spa 黃金分割 span 簡單 斐波那契數 數字 定義:程序調用自身的編程技巧稱為遞歸。一個過程或函數在其定義或說明中有直接或間接調用自身的一種方法,它通常把一個大型復雜的問題層層轉化為一個與原問題相似的規模較小的問題來求解,遞歸策略只需少量的程序就

Python全棧學習筆記day 23面向物件2名稱空間組合

__init__方法 :初始化方法 python幫我們建立了一個物件self 每當我們呼叫類的時候就會自動觸發這個方法。預設傳self 在init方法裡面可以對self進行賦值 self: self擁有屬性都屬於物件 在類的內部,self就是一個物件 類可以

程式碼講解面向物件下——程式碼塊內部類繼承(保證讓你全部都會噢)

//一、程式碼塊(筆試、面試常考知識點) //1.普通程式碼塊:普通程式碼塊就是定義在方法中的程式碼塊 // public class Lesson6{ // public static void main(String[] args){ // {//定義在main方法中的程式碼塊——