如何用JS修改已加载的CSS样式表样式?

如何用JS修改已加载的CSS样式表样式?,第1张

js是无法直接修改css文件的,但可以通过取对象的方式修改对象的样式,通常有两种方法:\x0d\x0a1、改变className,但首先在样式表中预设定样式类。\x0d\x0a例如:document.getElementById('obj').className='...'\x0d\x0a2、改变cssText。\x0d\x0a例如:document.getElementById('obj').style.height='100px'

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11277579.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存