JQuery处理元素尺寸和浏览器窗口尺寸

栗子1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="div 的宽度是: " + $("#div1").width() + "</br>";
txt+="div 的高度是: " + $("#div1").height()+"</br>";
txt+="div 包括内边距的宽度是: " + $("#div1").innerWidth() + "</br>";
txt+="div 包括内边距的高度是: " + $("#div1").innerHeight()+"</br>";
txt+="div 包括内边距边框的宽度是: " + $("#div1").outerWidth() + "</br>";
txt+="div 包括内边距边框的高度是: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
});
</script>
</head>
<body>

<div id="div1" style="height:100px;
                   width:300px;
                   padding:10px;
                   margin:3px;
                   border:1px solid blue;
                   background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>

</body>
</html>

栗子2 JS

下面JS想添加对话框的定位，要求对话框显示在决策报表全屏展示时的最下方，是挨着最下方，请高手帮忙指点：

var url='/WebReport/ReportServer?reportlet=1.cpt'//参数可以直接单元格取值
var iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='yes' frameborder='0'>"); // 对话框内iframe参数的命名，默认宽高占比是100%，可向下滚动
iframe.attr("src", url); // 给iframe添加src属性
var o = {
title:'对话框大小' ,
width : 960, //对话框宽度
height: 550 //对话框高度
};
FR.showDialog(o.title, o.width, o.height, iframe,o);//弹出对话框
*$('.fr-core-window').css('top',window.innerHeight-o.height)

栗子3

JS弹出窗口窗口的位置和大小

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no') //写成一行

参数解释： window.open 弹出新窗口的命令； 'page.html' 弹出窗口的文件名； 'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； js脚本结束只要改其中的top和left的参数就可以了！

JQuery处理元素尺寸和浏览器窗口尺寸

猜你喜欢