600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > JQuery处理元素尺寸和浏览器窗口尺寸

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

时间:2021-10-05 09:00:54

相关推荐

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

栗子1

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="/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的参数就可以了!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。