jq怎么获取自适应高度的iframe高度的准确数值

jq怎么获取自适应高度的iframe高度的准确数值,第1张

你用jq的时候是在页面加载的时候就获取了,并不是点击的时候获取的。时机不对。

$('#btn2')click(function () {

var boxAheight = $("#frame_content")outerHeight(true);

alert(boxAheight);

})

可以使用offset() 方法,该方法返回或设置匹配元素相对于文档的偏移(位置),该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。

1、使用offset() 方法获取一个元素距离浏览器的顶部和左边的可视距离,代码如下:

<html>

<head>

<script type="text/javascript" src="/jquery/jqueryjs"></script>

<script type="text/javascript">

$(document)ready(function(){

  $("button")click(function(){

    x=$("p")offset();

    $("#span1")text(xleft);

    $("#span2")text(xtop);

  });

});

</script>

</head>

<body>

<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>

<button>获得 offset</button>

</body>

</html>

2、运行的结果如下:

1、jquery获取滚动条高度使用scrollTop()方法。

2、首先我们新建一个长篇的HTML文档。

3、然后我们编辑JS脚本,使用scroll()方法,监听网页滚动。

4、然后我们使用scrollTop()获取垂直滚动距离。

5、然后保存文件,查看获取的垂直滚动距离即可。

height()

-获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。

-css('height') 和 height()之间的区别是后者返回一个没有单位的数值,前者是返回带有完整单位的字符串。当一个元素的高度需要数学计算的时候推荐使用height() 方法 。

-这个方法同样能计算出window和document的高度。

$(window)height(); // returns height of browser viewport

$(document)height(); // returns height of HTML document

注意:在绝对定位和给定display:block时,虽然style和script标签用width() 或 height()也将报告一个值,强烈建议不要在这些标签中调用这些方法。这是一种不好的做法,结果也证明是不可靠的。

innerHeight()

-为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。

-这个方法返回元素的高度,包括顶部和底部的padding,单位是像素。

-这个方法不适用于window and document对象,可以使用height()代替。

outerHeight()

-获取元素集合中第一个元素的当前计算高度值,包括padding,border和选择性的margin。返回一个整数(不包含“px”)表示的值 ,或如果在一个空集合上调用该方法,则会返回 null。

-outerHeight( [includeMargin ] ):include是一个布尔值,表明是否在计算时包含元素的margin值。

-这个方法不适用于window 和 document对象,可以使用height()代替。

$(document)ready(function(){ 

    alert($(window)height()); //浏览器当前窗口可视区域高度 

    alert($(document)height()); //浏览器当前窗口文档的高度 

    alert($(documentbody)height());//浏览器当前窗口文档body的高度 

    alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin 

    alert($(window)width()); //浏览器当前窗口可视区域宽度 

    alert($(document)width());//浏览器当前窗口文档对象宽度 

    alert($(documentbody)width());//浏览器当前窗口文档body的高度 

    alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin 

    alert(screenheight);//显示器分辨率,只能用JavaScript代码获 

    alert(screenwidth); 

});

上面的方法可以根据自己的需求选择一个合适的,

然后。获取固定层的大小:

var fixedWidth = $("#fixed")width();

var fixedHeight = $("#fixed")height();

最后赋给textarea:

$("#textarea")width(bodyWidth - fixedWidth);

$("#textarea")height(bodyHeight - fixedHeight);

<body>

<div style="border: 1px solid red;height:200px;width: 200px;"></div>

<script>

$(function(){

alert($("div")[0]offsetWidth)

})

 

</script>

</body>

这是我刚写的一个例子,你可以看一下,可能不太好。

下面这两个是我在网上搜到直接复制的

标签元素的宽高值获取

//绝对宽度

ObjoffsetWidth

//绝对高度

ObjoffsetHeight

以上就是关于jq怎么获取自适应高度的iframe高度的准确数值全部的内容,包括:jq怎么获取自适应高度的iframe高度的准确数值、jquery获取元素距离浏览器顶部的可视高度、jquery获取滚动条高度和位置等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9782039.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-01
下一篇2023-05-01

发表评论

登录后才能评论

评论列表(0条)

    保存