用js动态改变元素的css

Eidesen 发布于2019-08-20 18:25 / 871人阅读

摘要：对象跟别的属性一样，也是元素的一个属性，只是属性是一个比较特殊的属性，它不是一个字符串，而是一个叫做的对象一个包含属性的对象。返回的是一个对象一个只读的类数组对象。

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

测试

2: 嵌入式

3: 外部引用

在这三种里面，我们知道第一种内联式的权重是最高的。通过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
test

//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，就添加；如果已经有了，就删除。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84486.html

根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘（repaints）与回流（reflows）

摘要：渲染阻塞在浏览器进行加载时，其实是并行加载所有资源。则就叫称为重绘。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。前面有讲到当用户在浏览器输入url之后，经过一系列的过程，会最终向服务器请求到文档数据，文档数据请求到之后，浏览器会将这些数据传给浏览器渲染引擎，渲染引擎开始正式工作了。构建...

phodal 2019-08-23 13:39 评论0 收藏0
根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘（repaints）与回流（reflows）

摘要：渲染阻塞在浏览器进行加载时，其实是并行加载所有资源。则就叫称为重绘。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。前面有讲到当用户在浏览器输入url之后，经过一系列的过程，会最终向服务器请求到文档数据，文档数据请求到之后，浏览器会将这些数据传给浏览器渲染引擎，渲染引擎开始正式工作了。构建...

daryl 2019-08-02 12:05 评论0 收藏0
根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘（repaints）与回流（reflows）

摘要：渲染阻塞在浏览器进行加载时，其实是并行加载所有资源。则就叫称为重绘。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。前面有讲到当用户在浏览器输入url之后，经过一系列的过程，会最终向服务器请求到文档数据，文档数据请求到之后，浏览器会将这些数据传给浏览器渲染引擎，渲染引擎开始正式工作了。构建...

ranwu 2019-08-29 17:22 评论0 收藏0
CSS 自定义属性 -- 使用 JS 和不使用 JS

摘要：你曾想过在页面加载过后去修改或的变量值么我曾经尝试过但并没有成功因为当预处理的代码编译成了它的变量就不再是变量了然而自定义属性就没有这样的限制在该系列的文章中我曾提及过自定义属性它最牛扳的特性就是它的动态性它的强大我们一眼就能对比出来预处理你曾想过在页面加载过后去修改 Sass 或 Less 的变量值么? 我曾经尝试过, 但并没有成功, 因为当预处理的代码编译成了 CSS, 它的变...

megatron 2019-08-29 13:05 评论0 收藏0
如何在零JS代码情况下实现一个实时聊天功能❓

引言前段时间在 github 上看到了一个很trick的项目：用纯 CSS（即不使用 JavaScript）实现一个聊天应用 —— css-only-chat。即下图所示效果。 showImg(https://segmentfault.com/img/remote/1460000019242666?w=1503&h=870); 在我们的印象里，实现一个简单的聊天应用（消息发送与多页面同步）并不困...

shiweifu 2019-08-30 10:56 评论0 收藏0