西西软件园多重安全检测下载网站、值得信赖的软件下载站!
软件
软件
文章
搜索

首页编程开发javascript|JQuery → JQuery知识修改CSS属性以及特殊的样式函数介绍

JQuery知识修改CSS属性以及特殊的样式函数介绍

相关软件相关文章发表评论 来源:Jingle Guo时间:2013/12/15 11:49:04字体大小:A-A+

作者:Jingle Guo点击:91次评论:2次标签: CSS属性

  • 类型:音频处理大小:1M语言:中文 评分:5.1
  • 标签:
立即下载

在一个html页面中,我们有两种方式来控制一个对象的样式,用HTML attribute控制,或者用CSS类来控制,这两种方法虽然都能控制对象的样式,但是通过CSS来控制对象的样式,将内容和呈现分离开来是更为推荐的一种方法。JQuery提供了丰富的控制CSS样式的方法。

修改CSS类

我们可以通过attr和prop来直接修改对象的CSS类,但是一个对象可以有多个CSS类,我们有时只是想增加或者去掉一个CSS类,这时,用attr和prop就不是那么方便了,JQuery提供了如下便利的方法来修改CSS类

1.增加CSS类

addClass(classname|function(index, currentClass))

可用空格隔开需要增加的多个CSS类

2.除去CSS类

removeClass([classname]|function(index, currentClass))

可用空格隔开需要除去的多个CSS类,如果不指定CSS类,则除去所有CSS类。

3.判断是否有CSS类

hasClass(classname)

4.交互增删CSS类

toggleClass([classname][,switch]|function(index, class,switch)[,switch])

当提供classname时则增删指定的CSS类,当不提供时则增删所有拥有的CSS类。

当提供switch,则根据其true或false指,增或者删,否则,根据CSS类是否存在增或者删。

修改CSS属性

1.css(propertyName|propertyNames)

获取css属性值,1.9版新增用属性名数组来获取多个css属性的方法。如

$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])

将获取一个包含各属性值的数组。

2.css(propertyName,value|propertyName,function(index,value)|properties)

设置css属性值,1.6版新增用+=和-=在原有值的基础上设置属性值的方法,如css("width"."+=100")在原有width值的基础上加上100.

css函数拥有极为强大的兼容性,CSS和DOM的样式属性都能用在css函数中,比如background-color和backgroundColor都能被css用来设置背景。

特殊的样式函数

css看起来如此的强大,我们似乎不需要别的函数来获取样式值了,可是JQuery为我们想得更多。

我们知道用css('width')来获取宽度时得到的是'400px'这种带px的字符串,而我们有时候需要用400这个值来做一些算术计算,这时JQuery为我们提供了一系列的函数来获取这些特殊的算术值。

1.获取长宽算术值

width(),height()

获取内容的长宽值,这个值不包括padding,border,margin部分

innerWidth(),innerHeight()

获取内部的长宽值,这个值是width()和height()的值加上padding部分。

outerWidth(),outerHeight()

获取外部的长宽值,这个值是width()和height()的值加上padding和border部分。但是不包括margin。

outerWidth(true),outerHeight(true)

获取外部的长宽值,这个值是width()和height()的值加上padding,border和margin部分。

注意:对于window和document对象来说,它们不存在padding,border,margin部分,因此只能对它们使用width()和height()函数。

2.设置长宽值

height(value|function(index,height))

可以设置的值为100px,50%,auto等,当只设定为100,而没有指定其单位时,px是其默认单位。

注意:我们只能设置内容的长宽值,而不能设置inner或outer长宽值。

3.获取位置

offset()

获取对象集中第一个对象相对于document的位置

position()

获取对象集中第一个对象相对于其parent的位置

注意:获取到的位置信息为{left:100,top:20}这种形式的数据。

4.设置位置

offset(coords|function(index,coords))

对象集中对象相对于document的位置,用{left:100,top:20}这种形式的数据来进行设置。

5.获取和设置其滚动属性

scrollLeft([value])

获取和设置其向右滚动的值

scrollTop([value])

获取和设置其向下滚动的值

    相关评论

    阅读本文后您有什么感想? 已有人给出评价!

    • 8 喜欢喜欢
    • 3 顶
    • 1 难过难过
    • 5 囧
    • 3 围观围观
    • 2 无聊无聊

    热门评论

    最新评论

    发表评论 查看所有评论(2)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)