jQuery的属性与样式之样式操作.css()，jQuery基础 (一)

jQuery的属性与样式之样式操作.css()

通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了

.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：

.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果

设置：

.css(propertyName, value )：设置CSS
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式

注意事项：

浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
.css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样

任务

在代码编辑器中第21行填写相应代码

css("background-color")

在代码编辑器中第27行填写相应代码

css("font-size")

在代码编辑器中第33行填写相应代码

css(['width','height'])

在代码编辑器中第47 48行填写相应代码

css("background-color","red")
css("backgroundColor","yellow")

在代码编辑器中第53 54行填写相应代码

css("font-size","15px")
css("fontSize","0.9em")

在代码编辑器中第61行填写相应代码

css("width",function(index,value){
            //value带单位，先分解
            value = value.split('px');
            //返回一个新的值，在原有的值上，增加50px
            return (Number(value[0]) + 50) + value[1];
        })

在代码编辑器中第67行填写相应代码

css({
            'font-size'        :"15px",
            "background-color" :"#40E0D0",
            "border"           :"1px solid red"
        })

?不会了怎么办

index.html
imooc.css

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
div {
        width: 
       60px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
代码

全部精华我要发布

为什么最后那个样式的边框没有变化

已采纳回答 / qq_慕盖茨8319076

css({....}) 最后这个小括号呢

1 回答 930 浏览

2022-04-28

"border" : "3px soild red"

最新回答 / 宝慕林2497579

我也是这个问题?

2 回答 982 浏览

2020-07-12

我想问：选中color为blue的元素，怎么写,不要没有color的方法？

最新回答 / Sapce

可以试一试这么写$('*[style="color: blue"]');

2 回答 1188 浏览

2019-08-03

Number是什么意思？

最赞回答 / 慕慕2046813

将字符串变成数值

1 回答 2717 浏览

2019-03-13

关于value[1]的纠纷？

最新回答 / 慕少1205787

<...图片...>aaa

3 回答 770 浏览

2019-09-10

value[1]为什么是空的

已采纳回答 / weixin_慕先生4223703

px 是分隔字符串，px 右边的内容才是 value[1] 的值，所以是空。

2 回答 1254 浏览

2022-04-09

我记得JS的split（）方法用完之后，括号里的会不在数组里。比如字符串2:3:4，用split(:)，得到的是array（2,3,4）。不知道这里为什么px依然在。

已采纳回答 / 等你到天明

这里我觉得他有点不对劲。split是用来分割字符串的填写px的话最后会分割成数组[value,""],用parseInt直接可以将px给抛弃掉而且还可以转化为数字直接运算最后+“px”变为字符串$('.sixth').css("width",function(index,value){ //value带单位，先分解 value = value.split('px'); console.log(value); //返回一...

3 回答 2226 浏览

2019-04-08

我记得JS的split（）方法用完之后，括号里的会不在数组里。比如字符串2:3:4，用split(:)，得到的是array（2,3,4）。不知道这里为什么px依然在。

已采纳回答 / 巧克力味粑粑

你说的没错，我试了一下<...图片...><...图片...>60下面明显有个空，说明其实val[1]里面是没东西的。我想，最后有px单位可能是因为注意事项第三点提到的当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样

1 回答 1458 浏览

2018-08-18

return (Number(value[0]) + 50) + value[1];中的Number是jq里的字符转化成数字的写法吗

最赞回答 / 精慕门3809150

是的，因为split划分之后是有两个字符串元素的数组，第一个字符串是一串数字，第二个是px。用Number可以将第一个数字字符串转换成数字拼接之后返回。Number():可以用于任何数据类型转换成数值，只转换成十进制，比较万能，比如布尔可以转换成0或者1.parseInt()专门用于把字符串转换成数值；

1 回答 1202 浏览

2018-07-15