js外部样式和style属性的添加移除

时间:2022-09-17 12:34:51

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

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

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获取元素style属性

    function getStyle(ele,attr){ if( ele.currentStyle ){ return ele.currentStyle[attr]; // ie } else { r ...

  2. JS DOM属性,包括固有属性和自定义属性,以及属性获取、移除和设置

    属性分为固有属性property和自定义属性attribute 固有属性查看 固有属性可以通过ele.property 来获取,自定义属性不行 <!DOCTYPE html> <ht ...

  3. JS中style属性

    解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=&quot ...

  4. js中对style中的多个属性进行设值

    js中对style中的多个属性进行设值: 看一下案例自然就明白: document.getElementById("my_wz1").style.cssText="bac ...

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

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

  6. React&period;js 小书 Lesson23 - dangerouslySetHTML 和 style 属性

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson23 转载请注明出处,保留原文链接和作者信息. 这一节我们来补充两个之前没有提到的属性,但是在 ...

  7. &lpar;vue&period;js&rpar;axios interceptors 拦截器中添加headers 属性

    (vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...

  8. js 获取DOM的style属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【总结整理】js获取css的属性(内部,外部,内嵌(写在tag中))

    在JS中需要获取某个元素的宽高或者是绝对定位的位置信息,通常我们会这么写: var elemWidth = elem.style.width; console.log(elemWidth); //(空 ...

随机推荐

  1. Hibernate学习-Hibernate查询语言HQL

    HQL(Hibernate Query Language)Hibernate查询语言,语法类似于SQL,可以直接使用实体类及属性. 使用HQL 可以避免使用JDBC 查询的一些弊端 不需要再编写繁复的 ...

  2. ListView遍历每个Item出现NullPointerException的异常(转)

    在使用ListView过程中我们有时候需要遍历取得每个Item项中的一些数据(比如每个Item里面有TextView,需要获取它的文本等等),但是我们在遍历过程中经常会遇到NullPointerExc ...

  3. iOS沙盒机制介绍,Block 的介绍

    一.iOS沙盒机制介绍 (转载) 1)概念:每个ios应用都有自己的应用沙盒,应用沙盒就是文件系统目录,与其他应用放入文件 系统隔离,ios系统不允许访问 其他应用的应用沙盒,但在ios8中已经开放访 ...

  4. C&num; WinForm 调用WebService

    在Winform中对数据库进行操作缺乏安全性,因而可以使用Winform调用WebService来实现对数据库的各种操作. 在VS2010中,创建一个Web服务程序,第一:创建一个空的Web应用程序, ...

  5. Object类中getClass&lpar;&rpar;

    Object类中包含一个方法名叫getClass,利用这个方法就可以获得一个实例的类型类.类型类指的是代表一个类型的类,因为一切皆是对象,类型也不例外,在Java使用类型类来表示一个类型.所有的类型类 ...

  6. OpenGL —— 基础笔记

    1.基础博文    链接:http://blog.csdn.net/lotusone?viewmode=contents 2.绘制文字    链接:http://www.cnblogs.com/xia ...

  7. SQL Server :理解BCM页

    原文:SQL Server :理解BCM页 今天我们来讨论下批量更改映射(Bulk Changed Map:BCM)页,还有大容量日志恢复模式( bulk logged recovery model  ...

  8. 【JAVAWEB学习笔记】10&lowbar;JDBC连接池&amp&semi;DBUtils

    使用连接池改造JDBC的工具类: 1.1.1          需求: 传统JDBC的操作,对连接的对象销毁不是特别好.每次创建和销毁连接都是需要花费时间.可以使用连接池优化的程序. * 在程序开始的 ...

  9. CRM系统设计方案

    CRM系统设计方案 - 百度文库https://wenku.baidu.com/view/a34eebeb0242a8956bece473.html 服务支持http://www.uf-crm.com ...

  10. percona-Toolkit

    1:下载最新安装包 wget https://www.percona.com/downloads/percona-toolkit/2.1.1/percona-toolkit-2.1.1.tar.gz ...