JS与CSS结合-杨标的博客

JS与CSS的结合

clientWidth/clientHeight

clientWidth=width+padding
offsetWidth/offsetHeight

offsetWidth=width+padding+border

在DOM里面，这个部分主要包含两个部分，第一个是JS与HTML的结合操作，第二个部分则是JS与CSS的结合操作。在之前的时候，我们已经学过DOM当中的className或classList可以进行简单的样式操作，今天将对后面的东西进行扩展

DOM当中的classList属性操作CSS

在DOM时在，每个元素都有class属性，这个属性是用于对CSS的名称进行调用，它在JS里面返回的理个DOMTokenList的集合，这个对象它有常用的四个方法

add()添加一个class名称
remove()删除一个class名称
toggle()切换一个class名称，你有我就删除，你没有我就添加
contains()判断是否包含某一个class名称

在上面的这四个方法里面它都仅仅只是对class进行了操作

在学习下面的知识之前，我先说明一点，CSS里面经常会看到background-color,border-bottom等这种以-隔开的属性这个时候，在JS的操作里面它们要进行转换

background-color要转换成backgroundColor

border-bottom要转换成borderBottom

border-top-color要转换成borderTopColor

border-top-left-radius要转换成borderTopLeftRadius

转换规则：去掉里面的横线，横线后面的首字母大写

DOM里面的style属性

在之前讲HTML和CSS的时候已经提过，每个元素都有一个style属性，这个属性是用于设置这个元素的样式的，所以在JS里面，我们也可以通过某一个DOM对象去调用这个style属性

在之前的DOM里面，我们的DOM自带的属性可以直接通过“.”的方式来调用，所以这里应该是DOM对象.style

如果一个DOM元素想要获取当前元素的style行内样式，可以直接调用sytle属性，它返回了一个CSSStyleDeclaration类型的对象，里面有style的所有样式

<body>
    <div id="div1" style="width:100px;height:100px;border:1px solid black"></div>
</body>
<script>
    var div1=document.querySelector("#div1");
    //style是HTML标签自带的属性，所以可以直接DOM对象.style来调用
    console.log(div1.style);
</script>

注意：

只能够获取行内样式，其它的地方的样式我们获取不到
它可以进行赋值操作，但要注意它的优先级是1000

获取元素计算过后的CSS属性

这一个方法相较于上一个style的属性操作而言，它可以获取到任何地方的样式，它使用是window对象下面的window.getComputedstyle()这个方法来完成

<style>
    #div1{
        color: red !important;
        background-color: pink;
        font-size: 26px;
    }
    #div1::after{
        content: "123";
        color: green;
        display: block;
        border: 5px solid red;
    }
</style>
<div id="div1" style="width:100px;height:100px;border:1px solid black">div1</div>
<script>
	var div1=document.querySelector("#div1");
    var cssObj=window.getComputedStyle(div1);   //这个时候会获取到div1的计算过后的所有属性
    var cssObj2= window.getComputedStyle(div1,"::after"); //拿到after伪元素的样式
</script>

注意：

它可以获取所有的CSS样式，但是是经过计算的
它不能够进行赋值，赋值就会报错
它还可以拿到伪元素的样式

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

先获取<style>标签
再找到sheet这个属性，它返回一个CSSStyleSheet
在返回的CSSStyleSheet这个对象里面去找CSSRules或rules，这个属性会返回当前这个style标签下面所有的CSS样式，可以通过索引取值
取到以后直接再次调用style进行取值或赋值

<style>
    body{
        margin: 0px;
    }
    .div1{
        color: red !important;
        background-color: pink;
        font-size: 26px;
    }
    .div1::after{
        content: "123";
        color: green;
        display: block;
        border: 5px solid red;
    }
</style>
 <div class="div1" style="width:100px;height:100px;border:1px solid black">div1</div>
<script>
	var sty=document.querySelector("style");
    sty.sheet.CSSRules[1].style.backgroundColor;  //取值
    //如果要赋值，直接赋值就可以了
</script>

1566696178681

JS直接操作内部样式块2

在上面的一个章节里面，我们是一个一个的去设置样式和获取样式，如果我直接想添加一段进去呢

<style>
    body{
        margin: 0px;
    }
    .div1{
        color: red !important;
        background-color: pink;
        font-size: 26px;
    }
    .div1::after{
        content: "123";
        color: green;
        display: block;
        border: 5px solid red;
    }
</style>
 <div class="div1" style="width:100px;height:100px;border:1px solid black">div1</div>
<script>
	var sty=document.querySelector("style");
</script>

在上面的代码里面，如果我们想添加下面的CSS样式到style里面去，怎么操作呢

*{
    margin:0px;
    padding:0px;
    list-style-type:none;
}

JS提供了直接插入样式段的方法, 但是它有兼容性

sty.sheet.insertRule("* {margin:0px;padding:0px;list-style-type:none;}",2);

说明：第一个参数代表要插入的CSS文本，第二个参数代表插入的索引位置，默认为0，可以不填

注意：在IE8里面，它使用的规则是addRule()

如果想要删除一个样式规则，直接调用deleteRule(索引值)

sty.sheet.deleteRule(2);

说明：参数为你要删除的CSS规则的索引

注意：在IE8里面，它是removeRule()

当一个网页当中如果有多个style标签的时候，我们一定要注意这种情况，要把所有的style标签都获取到以后，再去判断操作

JS操作外部样式表

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

上面的代码里面，我们多外部导入了两个CSS文件，它个时候，可以按如下步骤去操作它

先获取link标签
```
var links=document.querySelectorAll("link[type='text/css']");
```
它返回的是一个NodeList集合，所以，我们暂时先以第二个为例子NodeList[1]
调用其sheet属性，返回一个 CSSStyleSheet
```
  links[1].sheet;
```

在接下来的操作步骤和内部样式块的操作保持一致就可以了

总结

style主要用于赋值，因为它可以直接赋值，并且权重值也比较大
取CSS样式值的时候，我们主要使用的是window.getComputed()这个方法，但是它不能赋值
后面的几种情况，知道，了解，会用就行了

目录CONTENT

JS与CSS结合