目 录CONTENT

文章目录

JS与CSS结合

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 8983 阅读 / 7001 字

JS与CSS的结合

  • clientWidth/clientHeight

    clientWidth=width+padding

  • offsetWidth/offsetHeight

    offsetWidth=width+padding+border

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

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>

注意

  1. 只能够获取行内样式 ,其它的地方的样式我们获取不到
  2. 它可以进行赋值操作,但要注意它的优先级是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>

注意

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

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

  1. 先获取<style>标签
  2. 再找到sheet这个属性,它返回一个CSSStyleSheet
  3. 在返回的CSSStyleSheet这个对象里面去找CSSRulesrules,这个属性会返回当前这个style标签下面所有的CSS样式,可以通过索引取值
  4. 取到以后直接再次调用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文件,它个时候,可以按如下步骤去操作它

  1. 先获取link标签

    var links=document.querySelectorAll("link[type='text/css']");
    

    它返回的是一个NodeList集合,所以,我们暂时先以第二个为例子NodeList[1]

  2. 调用其sheet属性,返回一个 CSSStyleSheet

      links[1].sheet;
    

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

总结

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

评论区