easy

DocsVersion : 1.0.0

css( name, [ val ] )

原型方法Define in : css.js

当无 val 参数时,该方法会返回第一个匹配元素的 CSS 属性名为 name 的属性值。有 val 参数时,则将 val 设置成所有匹配元素的 CSS 属性名为 name 的属性值。CSS 属性名可以带中划线也可以是驼峰式( 在JavaScript中涉及到样式相关的操作建议使用驼峰式 )。

参数
  • name
    String|
    Object
    必需

    CSS 属性名。为 Object 时,是一次设置多个属性。0.4.0 的版本增加了自动给属性名添加对 CSS3 私有前缀的功能。

  • val
    String
    可选

    CSS 属性值。无该参数是获取第一个匹配元素的样式,有该参数则是设置所有匹配元素的样式。

返回值
  • String

    无 val 参数则返回第一个匹配元素的 CSS 属性名为 name 的属性值。

  • easyJS Object

    有 val 参数则返回 easyJS Object 自身,便于链式调用。

例子1

获取 div 元素的 font-size。

box1
<div id="box1">box1</div>
alert( E('#box1').css('fontSize') );

运行

例子2

设置 div 元素的背景颜色。

box2
<div id="box2">box2</div>
E( '#box2' ).css( 'background', '#ccc' );

运行

例子3

还可以获取常见的简写格式的 CSS 属性值,暂时只支持 margin、padding、borderWidth、borderColor、borderRadius。

box3
<div id="box3" style="padding:10px">box3</div>
alert( E('#box3').css('padding') );

运行

例子4

获取 div 元素的颜色值,返回的结果都是 rgb 格式的颜色值,更加便于计算。

box4
<div id="box4" style="color:#f30">box4</div>
alert( E('#box4').css('color') );

运行

例子5

设置 div 元素的背景颜色和文字颜色,一次设置多个属性时使用 Object 格式传参。

box5
<div id="box5" >box5</div>
E( '#box5' ).css({
    'backgroundColor' : '#ccc',
    'color' : '#fff'
});

运行

例子6

使用 CSS3 对元素进行放大,不用添加私有的前缀来兼容各种浏览器。

<div id="box6" style="width:100px;height:100px;backgronud:#666" >box5</div>
E( '#box6' ).css({
    'transition' : '0.6s linear',
    'transform' : 'scale(1.5, 1.5)'
});

运行