jQuery_css

对于jQuery的css属性方法:

它有读取css样式和设置css样式的功能;

一.读取

我们通过jQuery对象.css('属性名')来读取匹配元素的属性值:

    例如:

        $("p").css("color");

        取得第一个段落的color样式属性的值。

二.设置

  通过jQuery对象.css('属性名',‘设置的属性值’)来设置属性值(单个属性): 

    例如:

        $("p").css("color","red");

        将所有段落字体设为红色


通过jQuery对象.css({属性名: “设置的属性值”,属性名 :“设置的属性值”....})来设置多个属性值:

$("p").css({ color: "#ff0011", background: "blue" });

将所有段落的字体颜色设为红色并且背景为蓝色。

通过jQuery对象.css(属性值:function(index,value){})来设置css样式(此函数返回要设置的属性值。接受两个参数,index为元素在对象集合中的索引位置,value是原先的属性值。):

$("div").click(function() {

    $(this).css({

      width: function(index, value) {

        return parseFloat(value) * 1.2;

      },

      height: function(index, value) {

        return parseFloat(value) * 1.2;

      }

    });

  });

逐渐增加div的大小


常用(例子说明):

1. 得到第一个p标签的颜色

  console.log($("p:first").css('color'));

  2. 设置所有p标签的文本颜色为red

  $('p').css('color','red')

  3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)

$('p:eq(1)').css({color:'#ff0011',background:'blue',width:30,height:300

  })

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 680评论 0 3
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,529评论 0 44
  • 2017-09-16摘抄自W3school-jQuery - css() 方法希望帮助自己系统地打好基础,也能在做...
    moralok阅读 192评论 0 0
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 766评论 0 9
  • 文/苏缪 午夜的大街上,男人徘徊在便利店门口的一排贩卖机旁,不仅有饮料贩卖机,还有便当,T T的自动贩卖。 不过吸...
    苏缪阅读 526评论 2 6