章节
问答
笔记
评论
占位
占位

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

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

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

获取:

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

设置:

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

注意事项:

  1. 浏览器属性获取方式不同,在获取某些值的时候都jQuery采用统一的处理,比如颜色采用RBG,尺寸采用px
  2. .css()方法支持驼峰写法与大小写混搭的写法,内部做了容错的处理
  3. 当一个数只被作为值(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"
        })

 

 

 

 

 

 

 

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?