设置 CSS 属性

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

使用 .css() 方法可以更灵活的去获取或者设置 css 属性,方法里面只用属性名称,它的功能就是获取选择结果里所有元素的属性值 … 如果再给属性指定一个具体的值,这样它的功能就变成了设置选择结果里第一个元素的属性和值。

下面,我们来看一下这个方法 …

先选中页面上这个元素 … 它上面有一个 .album 类 .. 然后使用 .css() 方法去查看这个元素的 width 属性的值 …

$( '.album' ).css( 'width' )

结果是 300px … 注意返回的结果是带单位的 … 这个宽度的单位是 px ,像素 …

再用这个 .css() 方法去设置一下这个元素的宽度 … 设置成 350 像素 … 这个属性值可以不需要使用单位 ..

$( '.album' ).css( 'width', ‘350' )

现在这个元素的宽度变成了 350 像素 … 这个宽度值相当于我们之前介绍的使用 outerWidth() 方法来设置的宽度 … 也就是宽度包含元素的宽度,加上内外边距还有边框 …

它其实就是在这个元素上添加了一个 style 属性 … 然后把 width 这个属性的值设置成了 350px …

在设置属性值的时候,我们也可以这样做,比如想让这个元素的宽度再加上 20 像素 …

属性的值这里,可以使用一个 += ,表示,在原来的基础上再加上 20 像素 … 另外也可以使用 -= ,表示在原来的基础上减少相应的值 …

$( '.album' ).css( 'width', '+=20' )

现在,这个元素的宽度就会变成 350+20 ,也就是 370 像素 … 如果你想要使用更复杂的去计算这个属性的值,在这里可以使用一个函数 … 在函数里去计算这个值 …

使用 .css 方法,可以同样设置多个属性 … 这样我们需要给它传递一个对象 ,在对象里,使用名值对的形式去设置属性,还有对应的值 ..

(#刷新)
比如我们同时设置一下它的宽度 … 还有它的边框 … 把要设置的属性放在一组大括号里 ... 每一组属性之间,使用一个逗号分隔一下 ...

$( '.album' ).css( {width: '370', border: '1px solid #000'} )

这行代码会把元素的宽度设置成 370 像素 … 边框设置城 1 像素的黑色实线 …

设置 CSS 属性《 jQuery 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点