jQuery之CSS操作

七、CSS操作

     * {
            margin: 0;
            padding: 0;
        }   
     .box{
            border: 10px solid red;
            width: 100px;
            height: 100px;
            padding: 10px;

        }
        .parent{
            width: 200px;
            height: 300px;
            border: 1px solid #000;
            overflow-y: scroll;
            overflow-x: scroll;
            white-space: nowrap;
        }

<button class="btn">按钮</button>
<div class="box"></div>

<div class="parent">
    jQuery是一个JavaScript函数库。<br/>
    jQuery是一个轻量级的"写的少，做的多"的JavaScript库。<br/>
    jQuery库包含以下功能：<br/>
    HTML 元素选取<br/>
    HTML 元素操作<br/>
    CSS 操作<br/>
    HTML 事件函数<br/>
    JavaScript 特效和动画<br/>
    HTML DOM 遍历和修改<br/>
    AJAX<br/>
    Utilities<br/>
    jQuery是一个JavaScript函数库。<br/>
    jQuery是一个轻量级的"写的少，做的多"的JavaScript库。<br/>
    jQuery库包含以下功能：<br/>
    HTML 元素选取<br/>
    HTML 元素操作<br/>
    CSS 操作<br/>
    HTML 事件函数<br/>
    JavaScript 特效和动画<br/>
    HTML DOM 遍历和修改<br/>
    AJAX<br/>
    Utilities<br/>
</div>

1.CSS

css(name|pro|[,val|fn])1.9*

    //获取或设置元素的CSS
    $('.btn').css('width', '100px').css('height', '30px').css('color', 'red');
    $('.btn').css({
        width: '100px',
        height: '30px',
        color: '#fff',
        fontSize: '13px',
        backgroundColor:'#000'
    });

    //获取只能一个一个来
    console.log($('.btn').css('width'));

2.位置

offset([coordinates]) 获取匹配元素在当前视口的相对偏移
position()  获取匹配元素相对父元素的偏移
scrollTop([val]) 
scrollLeft([val])

    console.log($('.box').offset());//获取的是一个对象
    var o = $('.box').offset();
    console.log(o.left);
    console.log(o.top);
    $('.box').offset({left: 20,top: 40}); //有参数就是设置相对于视口的偏移

    console.log($('.box').position());

    $('.parent').scrollTop(100);
    console.log($('.parent').scrollTop());
    $('.parent').scrollLeft(100);
    console.log($('.parent').scrollLeft());

 3.尺寸

height([val|fn]) 获取出来的宽高是没有像素单位的 
width([val|fn])
innerHeight()
innerWidth()
outerHeight([options])
outerWidth([options])

    //实际宽高
    console.log($('.box').width());
    console.log($('.box').height());

    //元素的内容区域+内间距
    console.log($('.box').innerWidth());
    console.log($('.box').innerHeight());

    //包含元素的 内容区域+内间距+边框
    //下面这两个  有参数  true  false  是否计算外边距
    console.log($('.box').outerWidth(true));
    console.log($('.box').outerHeight());