jquery 获取display为block的高度

jquery 获取display为block的高度,第1张

如下代码可以实现:

<style>

popdiv{width:200px;height:150px;}

</style>

<script src="jquery-191minjs"></script>

<script>

$(document)ready(function(){

var height = $("popdiv[style='display:block']")height(); //关键在这句

alert(height);

});

</script>

<div id="btn1box" class="popdiv" style="display:none">内容11</div>

<div id="btn2box" class="popdiv" style="display:none">内容22</div>

<div id="btn2box" class="popdiv" style="display:block">内容33</div>

1、新建HTML文件。

2、引入jqueryminjs文件。

3、创建HTML内容。

4、用jquery创建点击事件,点击隐藏按钮,p内容隐藏

5、用jquery创建点击事件,点击显示按钮,p内容显示。

6、预览如图当点击隐藏按钮,p内容隐藏。

7、当点击显示按钮,p内容显示。

display属于元素的css样式属性,而jQuery提供了

css()

方法设置或返回被选元素的样式属性,所以判断一个元素的display属性是不是none的代码为:

if(

$("#test")css("display")=='none'

)

{

//

TO

DO

}

此外,以下下两种方法也可以判断元素是否显示:

$("#test")css("visibility")=='visible'

//

判断visibility样式属性

$("#test1")is(":hidden")

//

判断:hidden选择器

jQuery 的 index() 方法返回指定元素相对于其他指定元素的索引值,注意:索引值是从0开始计数的。获得当前元素的索引值可用click事件触发

示例代码如下:获取被点击的a标签的索引值

1,创建Html元素

2,设置css样式

3,编写jquery代码

4,观察效果:因为index从0开始计数,所以点击第三个元素,获取的索引值是2

扩展资料

jQuery的核心特性:

1,具有独特的链式语法和短小清晰的多功能接口;

2,具有高效灵活的css选择器,并且可对CSS选择器进行扩展;

3,拥有便捷的插件扩展机制和丰富的插件。

4,jQuery兼容各种主流浏览器,如IE 60+、FF 15+、Safari 20+、Opera 90+等。

参考资料:

jQuery - 百度百科

1)使用一个大盒子(div 将元素都装起来

2)盒子中使用2个无序标签分别搭建选项卡头部与内容

图例:

1)消除网页(盒子 默认边距

2)若无序列表中使用li标签,需要给ul添加d性盒子属性(方法不唯一)

3)给每个li标签添加鼠标cursor: pointer(鼠标指针小手)属性

4)为标题盒子(ul class=title)里的第一个子元素(li)添加颜色样式(默认为第一个子元素

5)给所有的内容盒子(ul class=content)添加此元素不会被显示的属性(display:none)

6)给内容盒子里的第一个元素添加 显示为块级元素(display: block)

图例:

点击相应的标题会显示相应的内容

1)引入jquery框架

2)获取标题(ul)中的每一项(li),并且为他们注册点击事件(-

3)点击事件里先移除之前的高亮标题样式,添加当前当前的高亮标题样式

(根据this指针的指向来添加和移除样式)

4)获取内容盒子的第一项元素

5)移除之前显示内容的样式,添加当前显示内容的样式

(根据this指针的指向来添加和移除样式,使用eq方法根据this的指向找到对应元素的索引)

注意:eq() 方法将匹配元素集缩减值指定 index 上的一个。

图例:

总结:使用jquery方法需注意:

this的指向性问题与选择器的使用问题

以上就是关于jquery 获取display为block的高度全部的内容,包括:jquery 获取display为block的高度、怎样判断jQuery 元素是否显示与隐藏、jquery 判断是不是display等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: http://outofmemory.cn/web/9752515.html

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

发表评论

登录后才能评论

评论列表(0条)

保存