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

发布网友发布时间：2022-04-25 12:39

共4个回答

懂视网时间：2022-05-12 18:33

（1）input标签type为search，输入内容时会出现清除内容icon，

解决方法：

input[type="search"]{-webkit-appearance:none;}

input::-webkit-search-cancel-button {display: none;}

（2）多行省略号（给出高度），也可以使用标签内容(...)l来遮住字符text-overflow: ellipsis;

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;//表示第二行出现省略号
overflow: hidden;

（3）单行省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

热心网友时间：2022-05-12 15:41

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");

热心网友时间：2022-05-12 16:59

外链式，内嵌式，行内式

热心网友时间：2022-05-12 18:34

四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。