笔记:JS设置CSS样式的几种方式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了笔记:JS设置CSS样式的几种方式相关的知识,希望对你有一定的参考价值。

1、直接更改,比如:

xID.style.display = "block"; // 更改display属性,会覆盖css中的定义。
xID.style.display = "";      // 取消js更改display属性,以css样式为准。

这里的xID,是通过id获取的标签。当然,也可能是通过tagName之类的获取的标签。

这种方式,简单直接。但是要修改大量的样式的时候,不适合。所以,我更推荐第二种方式。

2、更改类名

xID.className = "xx   yy";

如果有多个类,就用空格隔开。前提,在样式中要有已有类的定义。比如这里的xx和yy类,在css中应该是写好的。

这种方式把所有的样式写在了css文件中,适合更改较多的样式以及炫酷的样式。js就只做一件事情:改类。至于这个类会把标签变成什么样子,交给css吧。

通过jquery也可以达到如上的效果:

$("#xID").css(
  fontSize:"12px",
  display:"block"
);  // 直接更改样式

$("#xID").addClass("xx");  // 增加删除类
$("#xID").removeClass("xx");

参考技术A 外链式,内嵌式,行内式 参考技术B 四种样式的优先级别是(从高至低):行内样式、内嵌样式、链接样式、导入样式。

以上是关于笔记:JS设置CSS样式的几种方式的主要内容,如果未能解决你的问题,请参考以下文章

JS设置CSS样式的几种方式

JS设置CSS样式的几种方式

JS设置CSS样式的几种方式

关于修改css样式的几种js用法

JS动态设置css的几种方式

在HTML中使用CSS样式的几种方式