使用JQuery使浏览器内的控件自适应浏览器大小

首先在<head>中加入对jQuery的引用

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

在JS中添加方法window.onresize和window.onload该方法为系统函数,在有触发时自动调用

<script type="text/javascript">
    window.onresize = function () {
        var Width = document.body.offsetWidth;//读取浏览器的宽
        //document.getElementById("ChartData").Width = Width;
        $("#ChartData").css({ "width": Width.toString() + "px" });//使用JQuery调整控件宽度
        document.getElementById("show_size").innerHTML = Width + "  " + document.body.offsetHeight;//显示当前浏览器宽度
        // alert(document.getElementById("show_size").value);  ChartFrame//载入页面是调用
    }
    window.onload = window.onresize;
</script>

另外读取浏览器大小的方法如下:

// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}

详细:

<script>
function getInfo()
{
var s = "";
s = " 网页可见区域宽:" document.body.clientWidth;
s = " 网页可见区域高:" document.body.clientHeight;
s = " 网页可见区域宽:" document.body.offsetWidth " (包括边线和滚动条的宽)";
s = " 网页可见区域高:" document.body.offsetHeight " (包括边线的宽)";
s = " 网页正文全文宽:" document.body.scrollWidth;
s = " 网页正文全文高:" document.body.scrollHeight;
s = " 网页被卷去的高(ff):" document.body.scrollTop;
s = " 网页被卷去的高(ie):" document.documentElement.scrollTop;
s = " 网页被卷去的左:" document.body.scrollLeft;
s = " 网页正文部分上:" window.screenTop;
s = " 网页正文部分左:" window.screenLeft;
s = " 屏幕分辨率的高:" window.screen.height;
s = " 屏幕分辨率的宽:" window.screen.width;
s = " 屏幕可用工作区高度:" window.screen.availHeight;
s = " 屏幕可用工作区宽度:" window.screen.availWidth;

s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script> 
时间: 2024-10-25 10:21:08

使用JQuery使浏览器内的控件自适应浏览器大小的相关文章

C# 窗体控件跟随窗体大小自动调节

测试目的:如何使得窗体内的控件可以跟随窗体大小自动调节 测试环境:WIN10 ENT + VS2015 方法原理:记录初始时窗口大小.控件大小等信息.每当窗口大小变化时,计算窗口大小相对于初始时的缩放比例,然后根据缩放比例再调整控件的位置(Location).大小(Size).字体大小(Font.Size). C#主要测试代码: using System; using System.Drawing; using System.Windows.Forms; namespace TEST1111 {

jquery messagetip信息语提示控件

编写原因: 作为提示框,jquery有个messagebox的控件,也就是弹出的提示框.但这个控件如果不是用在需要确认的时候,单单警告提示.消息提示.失败提示时,用户还需要去点下确认,有时这操作还是挺烦的(尽管可以设置timeout,会自动消失). 控件需求: 现在需要一个简洁消息提示控件,不需确认. 1.提示框可以从顶部或底部滑入,在失效后滑出. 2.可以设置滑入时间,内容停留时间.滑出时间. PS:比较简单的控件 效果如下 编写过程: 1.在无文档的情况下, 我建议将用户能传的参数的定义写在

QT内label控件通过opencv显示图像

1.对pro进行配置,使其能够理解opencv. INCLUDEPATH+=d:\opencv249\include\opencv d:\opencv249\include\opencv2 d:\opencv249\include LIBS+=d:\opencv249\lib\libopencv_calib3d249.dll.a d:\opencv249\lib\libopencv_contrib249.dll.a d:\opencv249\lib\libopencv_core249.dll.a

Asp.net 恢复页面内用户控件内的控件ClientID

众所周知在Asp.net中如果一个页面添加了一个用户控件(或母版页),那么用户控件内的控件的   ClientID号会被自动添加页面中用户控件的ClientID 即页面中的控件内的控件ClientID=用户控件id号+"_"+用户控件内控件的id号 说的太绕了,还是看下例子吧 在一个asp.net页面index.aspx中添加了一个head.ascx用户控件id号为"head1" head.ascx控件中有一个input#hid_name控件 那么index.asp

解决Android中,禁止ScrollView内的控件改变之后自动滚动

问题: 最近在写一个程序界面,有一个scrollVIew,其中有一段内容是需要在线加载的. 当内容加载完成后,ScrollView中内容的长度会发生改变,这时ScrollView会自动下滚,如下图所示: 滚动的那一下体验特别不好,所以要防止这种情况.即不论Scrollview中内容如何,都要保持在最上. 解决办法: 先简单写一下我的xml文件的结构: [html] view plaincopy <ScrollView android:id="@+id/scrollView1" a

强制IE浏览器或WebBrowser控件使用指定版本显示网页

强制IE浏览器或WebBrowser控件使用指定版本显示网页 自从装了IE10之后,就发现好些个网站显示都不是那么的正常,网站上有些功能竟然还会出现一些意想不到的BUG——本来就是针对IE开发的,现在IE下竟然用不起来了,让用户情何以堪?但是就为少量用户使用的系统去大动干戈的调整功能,这实在是让人头疼!在经过一番折腾之后,竟然找到一个非常M$的方法来解决 —— 强制高版本的IE浏览器用低地版本模式显示网页. 就是直接让IE10默认以指定的IE版本的浏览器模式来运行,并用这个指定的版本来进行解析页

C# winform datagridview 无需点击两次即可编辑内嵌控件的方法和删除默认的空行的方法

? 1 2 3 4 //点击一下即可对DataGridView中内嵌控件进行编辑,不需要二次点击 dgv.EditMode =DataGridViewEditMode.EditOnEnter; //DataGridView无默认行 dgv.AllowUserToAddRows = false; C# winform datagridview 无需点击两次即可编辑内嵌控件的方法和删除默认的空行的方法

DataGridView中内置控件常用事件使用心得

checkbox,button,imagebutton使用dataGridView1_CellContentClick private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e) { tb.Text+=string.Format("\r\n{0},Row:{1},Column:{2}","单元格内容单击!",e.RowIndex,e.ColumnInd

C# winform datagridview 内嵌控件值改变后立即触发事件,而不需要离开该单元格时才触发,此时需要用到dgv_CurrentCellDirtyStateChanged事件

以下是参考代码 //datagridview内嵌控件值修改事件 private void dgv_CurrentCellDirtyStateChanged(object sender, EventArgs e) { if (dgv.IsCurrentCellDirty) { dgv.CurrentCellDirtyStateChanged -= dgv_CurrentCellDirtyStateChanged; dgv.CommitEdit(DataGridViewDataErrorContex