所谓CSS-DOM操作就是读取和设置style对象的各种属性，style属性很强大，但是美中不足的是无法通过它来提取到通过外部CSS设置的样式信息，然而在家jQuery中，这些就可以通过css()方法实现了。
和之前一样，在开始前，我们先在html中写出接下来操作要用到的DOM结构树：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script type="text/javascript" src="jquery-3.2.1.js"></script> ???<style type="text/css"> ??????#Id1{width:200px;height:100px;border:1px solid red;color:red;} ??????#Id2{width:200px;height:100px;margin:50px;padding:20px;border:1px solid red;} ???</style></head><body> ??<div id="Id1">我是第一个DIV,我的id是Id1</div> ??<div id="Id2" style="color:#00ffff;">我是第二个DIV,我的id是Id2</div></body></html>css()
通过css()方法，我们既可以获取外部CSS导入的样式，也能获取html内联样式。
<script> ?????var color1 = $("#Id1").css("color"); ?????var color2 = $("#Id2").css("color"); ?????console.log(color1); ?????console.log(color2);</script>也可以直接使用css()方法设置某个元素的的样式。
<script> ?????$("#Id1").css("color","#000"); ?????$("#Id2").css({fontSize:"24px","backgroundColor":"#888","font-weight":"bold"});</script>从上面的例子中可以看出，css()即可以设置单个样式，也可以同时设置多个样式属性，需要注意的是，在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就需要用驼峰式写法，如果带上了引号，既可以使用驼峰式，也可以使用带“-”的方式，但是，为了养成良好的习惯，自然是带上引号比较好了。
宽度和高度
通过对css()方法的学习，我们知道，可以使用该方法获取和设置元素的宽高。
<script> ?????var width = $("#Id1").css("width"); ?????var height = $("#Id2").css("height"); ?????console.log(width); ?????console.log(height);</script>除此之外，在jQuery中，还有另外一种方法也可以获取元素的宽高，那就是width()和height()，这两个方法的作用是获取匹配元素当前计算的高度值，也就是说，css()获取的宽高与样式设置有关，可能会得到“auto”，也可能是“100px”这样的字符串，而width()和height()获取的宽高则是元素在页面中的实际宽高，与样式的设置无关，并且不带单位。
<script> ?????var width = $("#Id1").width(); ?????var height = $("#Id2").height(); ?????console.log(width); ?????console.log(height); ??</script>既然可以不带参数获取值，自然就可以传参数设置值了，用这两个方法设置宽高时，如果传递的值是一个数字，则默认单位为px，如果要用其他单位，则必须传递一个字符串。
在盒子模型中，元素的宽高有三种，分别是content-box、padding-box、border-box里的三种宽高，
<script> ???????console.log($(‘#Id2‘).height()); ???????console.log($(‘#Id2‘).innerHeight()); ???????console.log($(‘#Id2‘).outerHeight());</script>
除了上面的方法外，jQuery中还有以下几个常用的方法。
offset()
offset()方法能够获取和设置元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，还方法只对可见元素有效。
<script> ?????newPos=new Object(); ?????newPos.left="50"; ??? newPos.top="20"; ?????$("#Id1").offset(newPos); ????console.log($(‘#Id2‘).offset().left)； ???</script>position()
position()的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，它的返回对象也是包括top和left两个属性。
<script> ??console.log($(‘#Id2‘).offset().left); ??console.log($(‘#Id2‘).offset().top); ????</script>
scrollTop()和scrollLeft()
这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。当传入参数是，就是控制元素的滚动条滚动到指定位置。
CSS-DOM操作
原文地址：https://www.cnblogs.com/yuyujuan/p/9425159.html