分享好友 教程首页 教程搜索 频道列表

怎么使用jquery改变div高度

2022-05-17 21:192550
+关注2
核心提示:用代码测试

jquery中有多种方法可以修改元素的高度:

height()

css()

attr()



1、使用height()修改div高度

height() 方法可以设置匹配元素的高度。语法:

$("div").height(高度值)


示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-1.10.2.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#but1").click(function() {
                    $("div").height("30px");
                });
                $("#but2").click(function() {
                    $("div").height("100px");
                });
            });
        </script>
        <style>
            div{
                height: 60px;
                background-color: #FFC0CB;
            }
        </style>
    </head>
    <body>
 
        <div>
            一个div元素,高度60px
        </div>
        <br>
        <button id="but1">减小div高度</button>
        <button id="but2">增大div高度</button>
    </body>
</html>



2、使用css()修改div高度

使用css()给td元素添加height样式,语法:

$("div").css("height","高度值");


示例:在方法1示例的基础上修改

$(document).ready(function() {
    $("button").click(function() {
        $("div").css("height","40px");
    });
});



3、使用attr()修改div高度

利用attr()控制style属性值,给td元素添加height样式。语法:

$("div").attr("style","height:高度值")


示例:在方法1示例的基础上修改

$(document).ready(function() {
    $("button").click(function() {
        $("div").attr("style","height:100px")
    });
});



本文标签: #高度 #js #class #div
整理员:网络转载
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

swiper高度自适应

    最近在写项目中用到swiper做tab切换,因每个tab页的内容不一样,有的内容多,就会高一些,而有的内容少,会出现白屏,所以需要自适应高度,根绝官方API在swiper中添加 autoHeight: true ,但是并没有什么作用,第一

网络转载 CSS教程2023-03-28

前端css实现高度等于宽度

    今天在开发时遇到一个问题,如何使高度等于百分比的宽度。原本的想法是通过js获取,但是这个方法感觉太麻烦,希望能用css做的事情就不要js去做。完美的方案是通过padding来实现的。原理padding的定义:padding属性设

网络转载 CSS教程2022-08-17

iframe自适应高度(随内容高度变化)

    iframe自适应高度

网络转载 JS相关2021-12-04

为啥a标签不能设置宽度?

    为啥a标签不能设置宽度?在a标签上用css设置宽度没有任何反应,到底是为什么那?因为行内元素都是不能设置宽高的,a标签也是行内元素,所以也不能设置宽度,如果想设置宽度,必须把行内元素转换为block或者inline-bl

网络转载 CSS相关2021-10-03

iframe自适应屏幕高度

    这个需求一般用于移动端htmliframeid=idididsrc=https://hao.360.cn/iframeJS部分scripttype=text/javascriptfunctionautoHeight(){if(window.innerHeight){//FFnowHeight=window.innerHeight;}else{nowHeight=docum

小黑 web前端开发2021-08-12

下一篇
我来说两句
抢沙发