1. 程式人生 > >js瀏覽器視窗大小改變時事件

js瀏覽器視窗大小改變時事件

設定一個寬高根據當前視窗自適應的div,當頁面大小發生改變時,div的寬高也隨之發生改變:

<div id="homePage_svcSuccessData" class="main" style="background-color:white;"></div>

    <script>
        //頁面載入完成後預設執行的程式碼.
        $(function(){
            $("#homePage_svcSuccessData").height($(window).height());
            $("#homePage_svcSuccessData"
).width($(window).width()); }); window.onresize=function(){ $("#homePage_svcSuccessData").height($(window).height()); $("#homePage_svcSuccessData").width($(window).width()); //HollyProxy.HomePage.prototype.search('${ctx}');//每變一次都會載入該事件 };
</script>

示例:
這裡寫圖片描述

這裡寫圖片描述

相關推薦

js瀏覽器視窗大小改變事件

設定一個寬高根據當前視窗自適應的div,當頁面大小發生改變時,div的寬高也隨之發生改變: <div id="homePage_svcSuccessData" class="main" st

瀏覽器視窗大小改變頁面尾部 footer 可以以原來寬度隨滾動條顯示

今天在做前端頁面時碰到一個問題,發現footer底部部分當改變瀏覽器視窗大小時(變小),底部的內容背景色看到的區域也變小了,滾動條向右拉動,右邊留白了一部分,而左邊的內容不能顯示完整,就像下圖這樣: 想把它做成人家這樣: 於是思考半天想出來解決方案,很簡單,給bod

瀏覽器當前視窗寬高顯示在頁面上, 視窗大小改變, 也能動態顯示

<div id="root"></div> <script> window.onresize = ()=>{ var getRoot = document.getElementById("root"); getRoot.innerHTML =

瀏覽器視窗大小改變,onresize()事件觸發兩次

當瀏覽器視窗大小改變的時候將會觸發onresize事件 可以監控該事件的發生做一些響應式的處理 JS: window.onresize(function(){ //code }): jQuery: $(window).resize(functi

Bootstrop Table視窗大小改變修改Table高度

初始化表格引數的時候我們設定高度: tableBox.bootstrapTable('destroy').bootstrapTable({ undefinedText: "-", //查詢

jQuery獲取視窗大小視窗大小改變執行程式碼例項

$(function(){ if($("#parent").outerWidth()/2<=268){ $("#parent .block").outerWidth("100%") }else if($("#parent")

JS 實現監聽視窗大小改變,同時根據視窗大小修改某個元素的大小

文章來自:原始碼線上https://shengli.me/javascript/234.html   jQuery的方法:   以上的方法,不能寫在頁面載入完成事件函式$(function(){})內部,而需要寫在外面。 頁面載入完成事件: &

html 頁面 根據瀏覽器視窗大小 實時調整--(自適應)的js程式碼控制

1.js程式碼 //iframe自適應 $(window).on('resize', function() { // 設定Iframe視窗大小 configIframe(); }).resize(); function configIframe(){ var

JS獲取瀏覽器視窗大小 獲取螢幕,瀏覽器,網頁高度寬度(轉載)

網頁可見區域寬:document.body.clientWidth 網頁可見區域高:document.body.clientHeight 網頁可見區域寬:document.body.offsetWidth (包括邊線的寬) 網頁可見區域高:document

JS 獲取瀏覽器視窗大小clientWidth、offsetWidth、scrollWidth

常用: JS 獲取瀏覽器視窗大小 // 獲取視窗寬度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) w

JS讓網頁字型大小視窗大小改變改變

em 是相對於其父元素來設定字型大小的,這樣就會存在一個問題,進行任何元素設定,都有可能需要知道他父元素的大小, 在我們多次使用時,就會帶來無法預知的錯誤風險。rem 是 CSS3 新增的一個相對單位(root em,根em),這個單位引起了廣泛關注。這個單位與em有什麼區

拖拽改變大小例如:瀏覽器視窗大小改變

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽改變層大小</title> <style ty

監聽視窗大小改變,同時根據視窗大小修改某個元素的大小

jQuery的方法: <script> $(window).resize(function(){ var width = $(this).width(); var height = $(this).height();

前端總結之html:視窗大小改變頁面

學前端有一段時間了,想總結的一致沒時間,今天開始寫吧! 萬事開頭難,今天開始寫希望能堅持! 當寫頁面時,我們都會遇到使用者會拉伸視窗,改變視窗的大小。比如我們先寫一個div,在頁面程式碼中有註釋幫助閱讀。新手入門,我儘量每行都有註釋,方便以後回顧。

獲取瀏覽器視窗大小以及位置

前端開發有一個比較麻煩的事情就是需要關注與各種版本的瀏覽器的相容,由於獲取瀏覽器視窗大小與位置可能不會經常用到,所以我就把它們封裝成了兩個函式,以後用到可以直接引入,就不用再自己去花時間去做各種相容。

完全自定義Firefox瀏覽器視窗大小的方法

第一步,新建一個書籤連結。或是直接隨便拖動一個連結到書籤欄。 第二步, 給這個書籤重新命名。這裡我們設定為1024*768,當然,你想改成任何其它名字都可以,名稱只是為了方便檢視每個書籤連結的作用。接下來,就是最重要的一步,在location也就是書籤地址中填入 javas

C#當窗體大小改變,窗體中的控制元件大小也隨之改變

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.For

C#當窗體大小改變,控制元件的位置和大小隨之改變

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.For

VS2013 MFC 對話方塊控制元件大小視窗大小改變改變

視窗大小改變後控制元件大小也隨之改變 在對話方塊標頭檔案中定義 標頭檔案名稱:專案名稱Dlg.h POINT Old;//存放對話方塊的寬和高。 對話方塊cpp中初始化 cpp檔名稱:專案名稱Dlg.cpp 在OnInitDialog()函

JS瀏覽器賭博網站平臺出租事件迴圈機制

程序、執行緒程序賭博網站平臺出租【大神原始碼論壇】dsluntan.com  【布丁原始碼論壇】budingbbs.com 企娥3393756370是系統分配的獨立資源,是 CPU 資源分配的基本單位,程序是由一個或者多個執行緒組成的。執行緒是程序的執行流,是CPU排程和分派