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

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

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属性。

js外部样式和style属性的添加移除相关推荐

  1. js移除某个样式_js外部样式和style属性的添加移除

    在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢? 最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用 ...

  2. 正则表达式处理字符串中的img,去除style属性,添加自适应图片的类

    有一段html的字符串,需要查找出html中所有的img标签,并且去掉img中的style属性,添加图片自适应的类名img-responsive,具体封装的实现方法如下: formatImg:func ...

  3. jQuery如何判断是否拥有某属性以及添加移除(先判断有没有)某属性

    如果id为name的元素没有readonly属性他就会返回undefined,有就直接返回属性值可以借此来判断 $("#name").attr("readonly&quo ...

  4. js 动态给style标签内添加样式

    var style = document.createElement('style');style.type = 'text/css';style.appendChild(document.creat ...

  5. js实现input框添加移除属性

    js代码 添加移除属性 $(".readOnlyAttr").attr("readOnly",true");$(".readOnlyAttr ...

  6. JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性...

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  7. jquery 关于checked属性的添加与移除(解决.attr('checked',true)失效问题)

    一.遇到问题: $(":radio").removeAttr('checked');$(":radio").attr('checked','true'); 实际 ...

  8. html+jquery+添加样式,jquery设置css样式、style属性 示范

    jquery设置css样式.style属性 示例 css虽然会在一开始我们就定义好了,但是有很多场景需要我们动态设置css,或者单独修改一个dom控件的style属性,今天分享一下我总结的jquery ...

  9. Js之offset属性与style属性的区别

    Js之offset属性 offset翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置.大小等. 如果元素没有父级元素或者父级元素没有定位(祖先元素也可以),则以bo ...

最新文章

  1. .NET C#生成随机颜色,可以控制亮度,生成暗色或者亮色 基于YUV模式判断颜色明亮度...
  2. ‍面试官问:Mybatis和Mybatis-Plus执行插入语句后可以返回主键ID吗? ‍我:看我回答...
  3. Windows Server 2008 R2中的Hyper-V
  4. LeetCode 217. 存在重复元素(哈希)
  5. 一篇文章带你快速理解微服务架构,由浅入深带你走进微服务架构的核心
  6. golang java耗内存_分析golang内存占用情况
  7. HDU 2825 位压缩
  8. AJAX基础知识点——思维导图
  9. vim格式化代码实际上就是 缩进代码, 命令是等号=
  10. [TCP/IP] 传输层-ethereal 抓包分析TCP包
  11. 软件体系结构风格介绍
  12. 图书馆管理系统的c语言,图书馆管理系统 c语言.doc
  13. ubuntu1804安装显卡驱动
  14. 计算机隐藏用法表白,微信隐藏符号功能大全 情人节可以发这些表白
  15. 搜狗站长移动开放适配的pattern匹配规则怎么写?
  16. JS正则表达式(5) = 正则的捕获方法
  17. 如何查看有关计算机系统类型,电脑系统类型在哪查看
  18. nano编辑器的使用
  19. 信息化建设规划_统筹规划精准发力打造信息化建设新篇章
  20. 块存储、文件存储、对象存储这三者的差别

热门文章

  1. Jenkins学习三:介绍一些Jenkins的常用功能
  2. win10右击菜单在左边
  3. 'int' object has no attribute 'backward'报错 使用Pytorch编写 Hinge loss函数
  4. python接口自动化(三十一)--html测试报告通过邮件发出去——下(详解)
  5. 超实用的微信图片转换工具
  6. linux 使用rpm卸载软件的使用方法
  7. JSR 168 and Portlet
  8. [码海拾贝 之TC] 呼叫外部应用程序或脚本
  9. PDF 与 Word互转工具。 在线的 和安装软件
  10. html 自动滚动到底部,Javascript实现DIV滚动自动滚动到底部的代码