JS与CSS结合

JS与CSS结合

• clientWidth/clientHeight

  clientWidth=width+padding

• offsetWidth/offsetHeight

  offsetWidth=width+padding+border

DOM中的style属性

这个style属性主要是用于JS去控制DOM元素的行内样式，请一定要记得是行内样式

如果一个DOM元素想要获取当前的style行内样式，则可以直接调用style属性，它返回的是一个CssStyleDeclaration这个对象，这个对象里面包含CSS当中所有的属性，请看下面代码

<div id="div1" style="width:100px;height:100px"></div>
<script>
    var div1=document.getElementById("div1");
    div1.style;  //它会反回这个CSS行内的样式的对象
</script>

注意：style属性只能够拿到行内的样式，并不能拿到内部样式块，但是，我们可以通过对这个style属性进行赋值来修改样式

DOM操作内部样式块

如果想通过JS获取某一个DOM元素的块级样式表，则需要调用window.getComputedStyle()方法来完成

window.getComputedStyle(div2)

它返回的也是一个CssStyleDeclaration ,这个对象里面，它包含了块级的所有样式，它有一个非常好的优点，就可以块级的也可以获取到，行内的一样可以获取到

注意：

1. 通过这个方法获取的，就是计算以后的最终结果，如果样式有冲突，它会自己帮你计算
2. 通过computedStyle这个方法得到的CSS样式里面的所有属性都是只读的，不允许进行更改

👉 小技巧：修改找style属性，获取找getComputedStyle

getComputedStyle不仅仅可以获取Element的样式，还可以获取伪元素的样式

window.getComputedStyle(div1,"::after");

说明：上面的代码是获取div1元素的::after伪元素

---

DOM直接获取整个内部样式块

1. 先获取<style>标签
2. 找到sheet属性，它返回一个CSSStyleSheet
3. 在返回的CSSStyleSheet去找CSSRules,这个属性就包含了整个style样式里面的所有内部样式

var s=document.querySelector("style");
s.sheet.cssRules;  //返回一个集合，这个集合包含了所有的CSS样式
s.sheet.cssRules[0].style.backgroundColor； 

说明：在返回的集合里在， 一个选择器，就是一个内容

DOM直接操作整个内部样式块

当我们获取了某一个style标签的sheet以后，我们可以向里面插入内部样式的CSS代码

s.sheet.insertRule("body {background-color:yellow}",0)

说明：后面的参数0代表的是插入的位置（索引）

注意：在IE8里面新增样式规则使用的是addRule()

上面的方法是添加，现在我们看一下删除

s.sheet.deleteRule(0)

说明：上面的参数0代表删除索引为0的样式

注意：在IE8里面，删除规则使用的是removeRule()

DOM当中的classList属性操作CSS

在DOM里面，每个元素都有classList这个属性，它返回的是我们的当前样式的class的集合，这个对象有三个常用方法

• add()添加某一个class样式
• remove()删除某一个class样式
• toggle()你有我就删除，没有我就添加
• contain()判断是否有这个样式

DOM操作外部样式表

<link rel="stylesheet" href="./css/index.css" type="text/css" />

上面的代码，我们就从外边导入了一个CSS样式文件，这个时候，我们也需要操作它

• 第一步：先获取link标签的对象

  var l = document.querySelector("link")
  

• 第二步：调用其sheet属性

  l.sheet;
  

接下来，其它的操作与<style>标签的内部样式块操作保持一致就可以了