js外部样式和style属性的添加移除
在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢?
最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用正则,太麻烦了,后来才发觉还有这么简单的方法,废话不多说了。
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属性的添加移除的更多相关文章
- 原生js获取元素style属性
function getStyle(ele,attr){ if( ele.currentStyle ){ return ele.currentStyle[attr]; // ie } else { r ...
- JS DOM属性,包括固有属性和自定义属性,以及属性获取、移除和设置
属性分为固有属性property和自定义属性attribute 固有属性查看 固有属性可以通过ele.property 来获取,自定义属性不行 <!DOCTYPE html> <ht ...
- JS中style属性
解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...
- js中对style中的多个属性进行设值
js中对style中的多个属性进行设值: 看一下案例自然就明白: document.getElementById("my_wz1").style.cssText="bac ...
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
- React.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson23 转载请注明出处,保留原文链接和作者信息. 这一节我们来补充两个之前没有提到的属性,但是在 ...
- (vue.js)axios interceptors 拦截器中添加headers 属性
(vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...
- js 获取DOM的style属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【总结整理】js获取css的属性(内部,外部,内嵌(写在tag中))
在JS中需要获取某个元素的宽高或者是绝对定位的位置信息,通常我们会这么写: var elemWidth = elem.style.width; console.log(elemWidth); //(空 ...
随机推荐
- bzoj 1112 treap树
思路:我们只要check一遍每个长度为k的区间就好啦,对于一个区间来说的最优值显然是中位数,我们显然要动态求 第k大,所以需要一个二叉搜索树,用treap就好啦. #include<bits/s ...
- 【BZOJ 2669】 2669: [cqoi2012]局部极小值 (状压DP+容斥原理)
2669: [cqoi2012]局部极小值 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 667 Solved: 350 Description 有一 ...
- 【BZOJ 1221】 1221: [HNOI2001] 软件开发 (最小费用流)
1221: [HNOI2001] 软件开发 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1581 Solved: 891 Description ...
- 【BZOJ 3560】 3560: DZY Loves Math V (欧拉函数)
3560: DZY Loves Math V Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 241 Solved: 133 Description ...
- 苹果无sim卡激活
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 苹果无sim卡激活 这是不行的... 必须有SIM 卡. 有可能卡贴坏了,更换卡贴.
- BZOJ 4276: [ONTAK2015]Bajtman i Okrągły Robin
最大权值匹配,贪心匈牙利即可. 检查一些人是否能被全部抓住可以采用左端点排序,右端点优先队列处理. By:大奕哥 #include<bits/stdc++.h> using namespa ...
- OpenSSL Heartbleed “心脏滴血”漏洞简单攻击示例
OpenSSL Heartbleed漏洞的公开和流行让许多人兴奋了一把,也让另一些人惊慌了一把. 单纯从攻击的角度讲,我已知道的,网上公开的扫描工具有: 1. Nmap脚本ssl-heartblee ...
- Android开发AlertDialog解析
打开源码,首先映入眼帘的是三个构造方法,但这三个构造方法都是protected类型的, 可见,不允许我们直接实例化AlertDialog. 因此,我们再看别的有没有方法.可以实例化 再仔细一看,发现一 ...
- bzoj1004 purfer 序列
之前没不知道这个数列. 一个purfer序列与一棵树一一对应. 长度为n的purfer的集合: A = { s | s is a sequence and a∈[1,len(s)+2] 一个直接的结论 ...
- centos安装pcre
安装pcre前需要已安装gcc工具 1.跳转下载目录 cd install-file 2.下载pcre wget ftp://ftp.csx.cam.ac.uk/pub/software/progra ...