jQuery之CSS-DOM操作

1. css()方法可以设置属性，也可以返回属性内容;可以获取：内部、外部或者行内样式里面的属性。

console.log($('div').css('color')); //获取div盒子的颜色,在控制台打印出来

2. 下面这个方法只能获取行内的样式

console.log(document.getElementsByTagName('div')[0].style.display);

3. 原生javascript的获取元素全部的样式

let a = window.getComputedStyle(document.getElementsByTagName('div')[0],null)
console.log(a.display); //通过控制台打印出来

4. height()、width()可以设置和返回高度和宽度
   height()如果是怪异盒模型实际上获取（设置）的是content的高度
   width()如果是怪异盒模型实际上获取（设置）的是content的宽度
   如果是正常模型就是普通的height和width

/* 最好加单位px，这样的话可以明显的区别是px还是百分比% */
/* 如果不加默认是px */
console.log($('div').height('130px'));
console.log($('div').width('100%'));

5. offset()返回以像素为单位的top和left坐标，仅对可见元素有效。
   offset会把绝对定位的left值和margin-left的值加起来。
   offset会把绝对定位的top值和margin-top的值加起来。
   把元素设置成display：none 是获取不到left和top的值的。

console.log($('div').offset());

6. offsetParent()返回最近的已定位祖先元素(父亲或者爷爷或者祖先只要定位就能获取最近的祖先元素)。
   定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素。
   position没有设置上述三个值时，默认为static。

//匹配一个元素，这个元素是属性值为“a”的元素的祖先元素，并且这个祖先元素是经过定位的，将这个祖先元素背景设为红色
$('.a').offsetParent().css('background','red');

//返回第一个匹配元素相对于父元素的位置（这个父元素肯定是经过定位的）
console.log($('.a').position())