用js动态转变元素的css

2024年5月28日 211次阅读 来源: nanaistaken

1: CSSStyleDeclaration对象
跟别的属性一样，style也是元素的一个属性，只是style属性是一个比较特别的属性，它不是一个字符串，而是一个叫做CSSStyleDeclatation的对象：一个包括CSS属性的对象。比方：

element.style.fontSize = '20px';
element.style.color = '#fff';

2: js中对应的css属性的名字的划定规矩

1: css中属性的连字符（-）变成驼峰
    element.style.fontSize = '20px';
    
2: 当属性为js保留字时，在前面加前缀'css'
    element.style.cssFloat = 'left';
    
3: 给属性赋值必需为字符串范例: 
    element.style.fontSize = '40px'; (对的)
    element.style.fontSize = 40;（错的）
    element.style.fontSize = '40';（也是错的，须要带上单元，除非是‘100%’之类的百分百）

3: css中的复合款式
在js内里也能够像在css中那样运用复合款式，比方：

element.style.padding = '20px 30px 40px 50px';

以上代码运用复合款式属性‘padding’给元素指定了’padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’的值，分别为’20px’, ’30px’, ’40px’, ’50px’.
4: 经由过程js设置的CSS属性的权重
我们都晓得在html中有三种体式格局来转变元素的css，分别是：
1: 内联css

<h1 style="font-size: 40px;">测试</h1>

2: 嵌入式

<head>  
  <style type="text/css">  
      span{  
         color:red;  
     }  
  </style>  
</head>

3: 外部援用

<link rel='stylesheet' type='text/css' href='reset.css'>

在这三种内里，我们晓得第一种内联式的权重是最高的。经由过程js来设置的css恰好就是内联的式，所以他会掩盖嵌入式和外部援用的同名css属性。

另有一个很主要的点：要防止直接给style对象全部赋值，比方

element.style = 'fontSize: 40px';

如果这个元素原本的内联属性有许多，而你的本意实在只是想转变fontSize; 然则，经由过程上面的代码，会把其他的内联属性都去掉，末了只留下了fontSize.

4: window.getComputedStyle(element, pseudoElement);
在全局对象window上有一个要领叫‘getComputedStyle()’, 经由过程它能够猎取某个元素的终究的计算出来的属性，也就是终究通知浏览器怎样去衬着这个元素的css的属性。
这个要领接收两个参数：

1: element 
 想要查询的元素，必需
 
2: pseudoElement
 想要查询的元素的伪元素，当是null或许空字符串时，就是示意想查询元素自身，而不是伪元素

这个要领的返回值也是一个CSSStyleDeclaration对象，只是它和元素的style属性有一些区分：
1: 它是只读的
2: 它返回的css属性的值是经由计算了的。
类似于百分比，rem之类的相对值，不会被返回，而是返回换算好以后的绝对值，比方只会返回px为单元的值
3: 色彩以’rgb(#, #, #)’或许‘rgba(#, #, #, #)’返回，而不是16进制
4: 复合款式，会以特定的属性返回。
比方window.getComputedStyle(element, pseudoElement).padding是没有的，应当查询window.getComputedStyle(element, pseudoElement).paddingTop

4: 猎取一个元素的类名
想猎取一个元素的CSS类名，有两个属性都能够做到：

1: className
2: classList

先来试验一下，直观地感受一下这两者的区分。如果，我们有一个元素：

//HTML code
<div class="z-top-container has-banner">test</div>

//js code
var ele = document.querySelector('.z-top-container');
ele.className; //"z-top-container has-banner"
ele.classList; // ["z-top-container", "has-banner", value: "z-top-container has-banner"]

从上面的例子我们就能够看出区分：

1: className返回一个字符串，如果这个元素有多个class，则以空格分开。
2: classList返回的是一个DOMTokenList对象：一个只读的类数组对象。

接下来我们着重地来讲一下这个DOMTokenList对象。
DOMTokenList对象定义了三个修正元素的class的要领：

1: add(className)
    参数为class名字，范例为字符串，作用是给这个元素增加一个class
    ele.classList.add('hehe'); //给元素ele增加了一个名为‘hehe’的长css 类
2: remove(className)
    参数为class名字，范例为字符串，作用是给这个元素删除一个class
    ele.classList.remove('hehe');//从ele的css类内里去掉‘hehe’这个类
3: toggle(className)
    参数为class名字，范例为字符串，作用是如果元素没有这个class，就增加；如果已经有了，就删除。
    原文作者：nanaistaken
    原文地址: https://segmentfault.com/a/1190000010420511
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞