jquery中css的操作

最新推荐文章于 2023-02-01 00:18:56 发布

原创最新推荐文章于 2023-02-01 00:18:56 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文详细介绍了如何使用CSS进行网页布局，并通过jQuery进行元素样式和位置的动态操作，包括宽度、高度、边框、背景颜色等属性的设置与获取。

1.布局

<div id="box"></div>
<div class="list">
    <div class="block"></div>
</div>

2.书写样式

<style>
        body{
            position: relative;
        }
        .list{
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 5px solid #000;
            padding: 10px;
            margin: 10px;
        }
        .block{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>

3.关于css的操作

    css()  获取或设置元素的css
    
    jquery  里面可以进行链式操作  连点
    
    $("#box").css("width","200px").css("height","200px").css("border","1px solid #000

 $("#box").css({
        width:"100px",
        height:"100px",
        border:"1px solid #000",
        backgroundColor:"red"
    });

    console.log($("#box").css("border"));

offset 相对适口的偏移

 console.log($("#box").offset());

position 相对父元素的偏移
父元素相对定位

console.log($("#box").position());

scrollTop 获取或设置元素的上滑距

    console.log($(".list").scrollTop());
    $(".list").scrollTop(100);

    console.log($(".list").scrollLeft());
    $(".list").scrollLeft(100);

width() 设置或获取

	$(".list").width(300);
    console.log($(".list").width());
    //$(".list").height(300);
    console.log($(".list").height());

    console.log($(".list").innerHeight());
    console.log($(".list").innerWidth());

    console.log($(".list").outerWidth(true));
    console.log($(".list").outerHeight());