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

目录
  • 1.css()基本使用:
    • 1.1 获取css属性
    • 1.2 设置css属性
  • 2.width()系列基本使用(height()系列同理)
    • 2.1 width()
    • 2.2 innerWidth()与outerWidth()
  • 3.offset()与position()
    • 3.1 取值对比
    • 3.2 设置值对比
  • 4.scrollLeft()与scrollTop()
    • 4.1 取值
    • 4.2 设置值
    • 4.3 小demo

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样式属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • jQuery中scrollTop()方法用法实例

    本文实例讲述了jQuery中scrollTop()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的滚动条的垂直偏移量. 语法结构一: 当scrollTop()方法不带有参数的时候是返回匹配元素相对滚动条顶部的偏移量. 复制代码 代码如下: $(selector).scrollTop() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8&quo

  • jQuery修改class属性和CSS样式整理

    class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔. 具体使用方法见:http://www.w3school.com.cn/css/css_selector_class.asp   用jQuery进行类名修改既可以用attr()方法修改"class"属性,也可以用addClass(), rem

  • jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码

  • 基于jquery animate操作css样式属性小结

    昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi

  • jQuery居中元素scrollleft计算方法示例

    本文实例讲述了jQuery居中元素scrollleft计算方法.分享给大家供大家参考,具体如下: 如果需要将某个元素 在可以滚动元素(scroll)中设置为居中计算方法为: 需要的scrollleft + 普通居中时候的offsetLeft = 当前的scrollleft+当前元素的offsetLeft = 固定的当前元素在整个滚动条中距离左边的位置 DEMO示例: <!DOCTYPE html> <html lang="en"> <head> &l

  • 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

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

    目录 1.css()基本使用: 1.1 获取css属性 1.2 设置css属性 2.width()系列基本使用(height()系列同理) 2.1 width() 2.2 innerWidth()与outerWidth() 3.offset()与position() 3.1 取值对比 3.2 设置值对比 4.scrollLeft()与scrollTop() 4.1 取值 4.2 设置值 4.3 小demo 1.css()基本使用: 1.1 获取css属性 1.1.1 获取单个属性值(传入字符串)

  • 修改jquery中dialog的title属性方法(推荐)

    好久都没办法尝试成功 在网上找的经测试也不行 于是在官方文档上看到了 结果终于成功了 $("#overTime").dialog({ autoOpen: false, width: 400, modal: true, title: "Dialog Title", buttons: { "确定": function () { }, "取消": function () { } } }); 在初始化的时候要写title属性(官方文档

  • 小程序中使用css var变量(使js可以动态设置css样式属性)

    使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单. 基本用法 基础用法 <!--web开发中顶层变量的key名是:root,小程序使用page--> page { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; } .

  • 从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

  • 详解jQuery中的元素的属性和相关操作

    元素属性 元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要. jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用,用来设置或获取属性的值.和 $.fn.css 用法类似,$.fn.attr 既可一次性接受单个属性,也可以接受多个属性(对象) : $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are

  • jQuery CSS()方法改变现有的CSS样式

    jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456'); //选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果需要改变多个样式

  • jQuery CSS()方法改变现有的CSS样式表

    使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456'); //选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果需要改变多个样式属性,可先定义属性变量

  • jQuery 改变CSS样式基础代码

    其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代码: 复制代码 代码如下: $("#61dh a").css('color','#123456'); //这里选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法.示

  • jquery实现动态改变css样式的方法分析

    本文实例讲述了jquery实现动态改变css样式的方法.分享给大家供大家参考,具体如下: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个

随机推荐