第一百二十三章 CSS 的操作

上一章我们知道了,使用 $().attr('style') 的方法可以操作行内样式表。但是这种方法,让人觉得泯然大众矣,有点对不起我们神奇的 CSS。

其实就是 CSS 是个比较复杂的属性,我们得给它弄个专属的方法,这样好用、稳定、效率高。

但是,我脑仁小啊,记不住啊,幸好 jQuery 很简单,操作 CSS 就用 css 方法就行了(多好记。

差不多和 attr 一样的用法,不过已经是针对 CSS 了,所以后面小括号里要说清楚的是哪一条 CSS 属性。

const font_color = $('#miao').css('color');$('#miao').css('color', 'red');

获取到的值是最终应用在这个元素上的样式,也就是不管外部样式表、内部样式表、内联样式表……反正获取的是计算后的最终结果。

但是设置,就只是内联样式表,行内样式表,嵌入式……反正就是在元素标签里写 style 属性那种,我居然在网上看到好多种名字了。

因为这样优先级高,一般都可以稳定起作用,又不用我们去写,去读,乱不乱的就完全不管了。

不过相比于 HTML 元素中的属性,CSS 属性就很多很热闹了,这样单独的设置,明显不能满足我们的需求,一条属性写一句什么的,我懒啊!

CSS 的写法很类似我们学过的对象,无论是书写格式,还是内容,结构……其实就是一个对象了啦,只是每条数据后面用的是分号,换成逗号就彻底一样了。

所以我们可以给某个元素直接塞一个对象,来实现批量设置:

$('#miao').css({'color': 'red', 'font-size': '16px'});

可以整理一下格式,方便阅读:

$('#miao').css({'color': 'red','font-size': '16px'});

小括号里放了一个对象,像 color 这种属性名,不写引号也可以。但是 font-size 这种里面有特殊符号的,就必须写,我喜欢索性都写上(仅限这个方法中,奇怪的习惯呢~

有的同学可能觉得写引号很麻烦,就是不想写,就是不喜欢写,那也是可以的,嗯,就是这么的随和。但是减号肯定会引起误会,所以我们要把含有减号的属性名称,改为小驼峰的写法,就像:fontSize 这样。

当然一个属性也可以用对象的格式进行设置,这样记住一种用法就可以通行各种情况。我就是懒(今天说了好几遍),想少打几个字符。

至于获取,没什么批量的方法,老老实实一个属性一个属性的获取好了,不过真的有需要大量获取的情况,应该考虑一下,是不是有其他方式进行变通。

很重要的一个方法,这么快讲完了,篇幅都不够,算了,不凑了,今天懒……

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百二十三章 CSS 的操作

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏