jQuery中的CSS样式属性css()及width()系列大全

 更新时间:2021年08月31日 16:46:26   作者:安之ccy  
本文给大家分享jQuery的CSS样式属性css(),width()系列,offset()与position(),scrollLeft()与scrollTop()的相关知识,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧

1.css()基本使用:

 1.1 获取css属性

1.1.1 获取单个属性值(传入字符串)

div {
    width: 100px;
    height: 100px;
    background: red;
}
<div>div1</div>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    console.log( $('div').css('width') );
    console.log( $('div').css('background') );
</script>

效果:由于background是复合属性,获取其值,会把其中所有的属性都列出来

在这里插入图片描述

1.1.2 获取多个属性值(用数组)

console.log( $('div').css(['width', 'background']) );

效果:获取的多个属性值用对象的形式返回

在这里插入图片描述

1.2 设置css属性

1.2.1 设置单个属性值(用字符串)

$('div').css('color', 'white');

效果:字体变白色

在这里插入图片描述

1.2.2 设置多个属性值(用对象)

$('div').css({
    color: 'white',
    width: '200px'
    //此处可以写'200','200px',或者200,默认都以像素为单位
});

效果:字体颜色为白色,div宽度变成200px

在这里插入图片描述

1.2.3 demo:每点击一次div,宽度就增加100px

$('div').click(
    $(this).css({
    width: '+=100'})//自动获取当前width属性,并加100px
)

效果:

在这里插入图片描述

2.width()系列基本使用(height()系列同理)

 2.1 width()

2.1.1 取width值

与dom.css(‘width')对比,css(‘width')获取的结果是一个字符串,包含像素值和单位;
width()获取的结果是一个number,不是字符串,不带单位,方便加减

console.log( $('div').css('width') );//'100px'
console.log( $('div').width() );//100 number类型

2.1.2 设置width值

// console.log( $('div').css('width','200px') );
console.log( $('div').width('200px') );

2.2 innerWidth()与outerWidth()

2.2.1 取值对比

div {
    width: 100px;
    height: 100px;
    padding: 30px;
    border: 20px solid orange;
    margin: 10px;
    background: red;
}
console.log( $('div').width() );//100 = content
console.log( $('div').innerWidth() );//160 = content + padding
console.log( $('div').outerWidth() );//200 = content + padding + border
console.log( $('div').outerWidth(true) );//220 = content + padding + border + margin

在这里插入图片描述

2.2.2 设置值:只会改变content的宽度

$('div').innerWidth('100');//将content+padding总值改成100px,padding不变,content宽度变成40px
$('div').innerWidth('50');//padding仍不变,content变成0
$('div').outerWidth('150');//content+padding+border=content+30*2+20*2=150,content=50
$('div').outerWidth('50');//content+30*2+20*2=50,content=0,padding,margin,border不变

box模型图如下:当设置的宽度比之前设置的小时,padding、border、margin均没有改变,只有content缩小,直至0

在这里插入图片描述

宽度设置得比原先的大,拓宽的也只有content

$('div').innerWidth('300');

在这里插入图片描述

3.offset()与position()

3.1 取值对比

offset()取的是元素相对于文档的定位;position()取的是相对于最近的带定位的父级的定位

3.1.1 父级不设置position

.wrapper {
    width: 300px;
    height: 300px;
    margin: 100px;
    background: #ccc;
}
.content {
    position: absolute;
    left: 150px;
    top: 150px;
    width: 100px;
    height: 100px;
    background: red;
}
<div class="wrapper">
    <div class="content"></div>
</div>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    console.log($('.content').offset());
    console.log($('.content').position());
</script>

效果:由于wrapper没有设置定位,所以content最近的设置position的是body,position的值是相对body的
offset返回的对象本来就相对文档定位的(body默认的margin: 8px由于塌陷所以没有了)

在这里插入图片描述

在这里插入图片描述

3.1.2 父级设置position

当wrapper设置position时:

.wrapper {
    position: relative;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 300px;
    background: #ccc;
}
.content {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: red;
}

效果:

在这里插入图片描述
在这里插入图片描述

3.2 设置值对比

position()不可手动设置;offset()可以手动设置

$('.content').offset({
    left: 50,
    top: 50
});

效果:相对文档定位

在这里插入图片描述

4.scrollLeft()与scrollTop()

scrollLeft():获取横向滚动条距离左侧的值
scrollTop():获取纵向滚动条距离上方的值

4.1 取值

.wrapper {
    width: 400px;
    overflow: auto;/*横纵向滚动条的关键*/
}
.content {
    display: inline-block;
    width: 100%;
    height: 100%;
}
$('.content').offset({
    left: 50,
    top: 50
});

效果:

在这里插入图片描述

要在父级(.wrapper)上取值,如果父级是body,可以直接在document上取值:$(document).scrollLeft()

4.2 设置值

在这里插入图片描述

竖向滚动条向上滚,滚动的距离是文本内容向上冲出的距离,也是滚动条下拉的距离

在这里插入图片描述
在这里插入图片描述

4.3 小demo

功能:看文章时,每隔一段时间滚动条自动上滑,呈现后面内容,省去手动滑的操作

.content {
    width: 400px;
}

文本内容由class名为content的div括起:

在这里插入图片描述

功能实现的代码:

var timer;
var newTop;
timer = setInterval(function () {
    newTop = $(document).scrollTop();
    if (newTop + $(window).height() >= $('body').height()) {
        clearInterval(timer);
    } else {
        console.log('timer');
        $(document).scrollTop(newTop + 20);
    }

}, 100)

body高度由内容撑开,所以$('body').height()也可以写成$('.content').height()
当滚动条滚动距离+显示窗口高度>=文本实际高度时,代表滚动条已经拉到底了,就可以清空计时器了

在这里插入图片描述

效果:不断往下拉,到底之后计时器就被清空了

在这里插入图片描述

会看到,到最后其实有一小块没有到底:

在这里插入图片描述

是因为body默认带了8px的margin,取消即可

另:尝试单独画一个div放置这个自动滚动的效果,巩固一下判断条件的理解:

body {
    margin: 0;
}
.wrapper {
    height:400px;
    width: 400px;
    overflow: auto;
}

.content {
    
    display: inline-block;
    width: 100%;
}

文本内容content外又包裹了一层wrapper

var timer;
var newTop;
timer = setInterval(function () {
    newTop = $('.wrapper').scrollTop();
    if (Math.round(newTop + $('.wrapper').height()) >= Math.round($('.content').height())) {
        clearInterval(timer);
        console.log('clear');
    } else {
        console.log('timer');
        $('.wrapper').scrollTop(newTop + 20);
    }

}, 100)

在这里插入图片描述

到此这篇关于jQuery中的CSS样式属性css()及width()系列大全的文章就介绍到这了,更多相关jQuery的CSS样式属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • jquery和ajax的关系详细介绍

    jquery和ajax的关系详细介绍

    JQuery、AJAX都是Javascript的一个框架,各有各自不同的功能,下面为大家介绍下jquery和ajax的关系,不了解的朋友可以参考下
    2013-11-11
  • jQuery EasyUI 的EasyLoader功能介绍

    jQuery EasyUI 的EasyLoader功能介绍

    jQuery EasyUI是一款基于JQuery的UI快速搭建组件。今天介绍下EasyLoader的功能。
    2010-09-09
  • 25个优雅的jQuery Tooltip插件推荐

    25个优雅的jQuery Tooltip插件推荐

    jQuery 工具提示可以让网站上一些小的帮助信息显示更加直观,提升用户的体验。
    2011-05-05
  • 深入理解jQuery.data() 的实现方式

    深入理解jQuery.data() 的实现方式

    本篇文章主要介绍了jQuery.data() 的实现方式,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • jquery实现浮动的侧栏实例

    jquery实现浮动的侧栏实例

    这篇文章主要介绍了jquery实现浮动的侧栏,实例分析了基于jQuery的stickySidebar插件实现浮动层的相关技巧,需要的朋友可以参考下
    2015-06-06
  • jquery判断输入密码两次是否相等

    jquery判断输入密码两次是否相等

    这篇文章分别介绍了Jquery框架easyui判断输入密码两次是否相等,以及使用jQuery.validate验证表单中两次密码是否一致的问题,需要的朋友可以参考下
    2015-12-12
  • jQuery Validation Plugin验证插件手动验证

    jQuery Validation Plugin验证插件手动验证

    jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持,接下来通过本文给大家介绍jQuery Validation Plugin验证插件手动验证
    2016-01-01
  • 利用jQuery设计一个简单的web音乐播放器的实例分享

    利用jQuery设计一个简单的web音乐播放器的实例分享

    这篇文章主要介绍了利用jQuery设计一个简单的web音乐播放器的实例分享,包括PHP后台和从MySQL中读取曲目等基本功能的实现,需要的朋友可以参考下
    2016-03-03
  • jQuery 防止相同的事件快速重复触发方法

    jQuery 防止相同的事件快速重复触发方法

    下面小编就为大家分享一篇jQuery 防止相同的事件快速重复触发方法。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • JQuery validate 验证一个单独的表单元素实例

    JQuery validate 验证一个单独的表单元素实例

    下面小编就为大家带来一篇JQuery validate 验证一个单独的表单元素实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02

最新评论