js外部样式和style属性的添加移除
发布日期:2021-08-18 16:37:34 浏览次数:8 分类:技术文章

本文共 1063 字,大约阅读时间需要 3 分钟。

在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢?

最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用正则,太麻烦了,后来才发觉还有这么简单的方法,废话不多说了。

1.外部样式class的添加删除

Html:

     document.getElemntById("元素id").addClass("样式类名");

          document.getElemntById("元素id").removeClass("样式类名");

 

jQuery:

   $("#元素id").addClass("样式类名");         //追加样式

        $("#元素id").removeClass("样式类名");

   $("#元素id").toggleClass("样式类名");    //添加删除切换样式

        $("#元素id").css(属性名,属性值);          //追加样式属性

 

 

2.内部样式style的增加删除

使用js操作style属性的写法是有一定规律的,下面以一个style属性为例:style="margin:1px;border-bottom:1px soild #ccc;float:right;"

  a.对于没有中划线的css属性一般直接使用style.属性名即可访问。如:obj.style.margin = "2px";//修改margin属性

  b.对于含有中划线的css属性,将每个中划线去点并将每个中划线后的第一个字母大写,通过style.改写后的属性名访问。如:obj.style.borderBottom = "";//清空border-bottom属性

  c.float属性比较特殊,IE:obj.style.styleFloat,其他浏览器:obj.style.cssFloat.

获取所有的style属性值:obj.style.cssText;

删除属性:obj.style.属性名 = "";

或者使用jquery的css()方法。如:

$("#id").css("width"):获取style中width属性的值

$("#id").css("width","100px"):设置style中width属性的值为100px。

$("#id").css("width",""):去掉style中width属性。

转载于:https://www.cnblogs.com/henuyuxiang/p/7423993.html

转载地址:https://blog.csdn.net/weixin_30897233/article/details/97405444 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Mybatis JdbcType与Oracle、MySql 数据类型对应关系
下一篇:生成指定范围的一组随机数并求平均值

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年04月24日 01时07分19秒