day26—JavaScript对CSS样式的获取和修改实践
转行学开发，代码100天——2018-04-11
通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能。对于CSS样式通常有行内样式，外部样式，内嵌样式之分。
如：
行内样式：
<div id="box" style="width: 100px;height: 100px;background:#ccc"></div>
外部样式：
<link rel="stylesheet" type="text/css" href="ccss.css">
内嵌样式：
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
对于样式的获取也因其写入方式不同而有所区别：
对于行内样式的获取，用 obj.style.属性方式
如下面的一个获取和修改行内样式的案例：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript获取样式的方式</title>
<script type="text/javascript">
//css样式获取和修改方法，两个参数时，获取；三个参数时修改
function css(obj){
alert(arguments[0]);
if (arguments.length==2) {
return arguments[0].style[arguments[1]];
}else
{
arguments[0].style[arguments[1]] = arguments[2];
}
}
//封装获取元素方法
function $(id){return document.getElementById(id);}
window.onload =function () {
var box = $('box');
alert(css(box,"width"));//获取
css(box,"width","200px");//设置属性 }
</script>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background:#ccc"></div>
</body>
</html>
通过css函数技能获取样式也能修改样式，其前提是基于获取的HTML对象obj
function css(obj){
alert(arguments[0]);
if (arguments.length==2) {
return arguments[0].style[arguments[1]]; //获取样式
}else
{
arguments[0].style[arguments[1]] = arguments[2]; //修改样式
}
}
为了使用方便，提升函数的通用性，可以将该函数进一步优化，增加obj,name,value参数
//css样式获取和修改方法，两个参数时，获取；三个参数时修改
function css(obj,name,value){
// alert(arguments[0]); //arguments[0]=obj
if (arguments.length==2) {
return obj.style[name]; //获取样式
}else
{
obj.style[name] = value; //修改样式
}
}
非行间样式：obj.style.属性 方式并不适用与非行间样式
“好东西一般不兼容”
在用currentStyle() 与getComputedStyle() 获取非行间样式时需要考虑兼容性问题，而浏览器的兼容性问题一般都是通过if..else条件语句实现。
obj.currentStyle[attr] 兼容IE6、7、8
getComputedStyle(obj,false)[attr] 不兼容IE6、7、8
//获取样式
function getStyle(obj){
alert(obj.currentStyle);//考虑兼容性问题
if (obj.currentStyle) {
alert(obj.currentStyle.width);
}else{
alert(getComputedStyle(obj,false).width);
}
}
优化该函数后如下：
//获取样式
function getStyle(obj,name){
// alert(obj.currentStyle);//考虑兼容性问题
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
但是currentStyle() 与getComputedStyle() 方式只能用于获取样式，而不能设置样式
此外：
currentStyle()方式只能获取简单样式（height，width等），不能用于获取复合样式（border,background）等，若需要获取背景颜色，可以用backgroundcolor
总结：
1.行内样式：obj.style.属性
2.非行内样式:obj.currentStyle[attr] 兼容IE6、7、8
getComputedStyle(obj,false)[attr] 不兼容IE6、7、8
3.兼容性问题基本上都是通过if...else条件语句实现
4.currentStyle（）方式不能获取复合样式。
day26—JavaScript对CSS样式的获取和修改实践的更多相关文章
- 转：jquery操作元素的css样式（获取、修改等等）
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- 使用jquery操作元素的css样式（获取、修改等等）
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- 原生javascript 获得css样式有几种方法？
css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用 ele.style."属性名称"(如果遇到属性名称带有"-", ...
- JavaScript对css样式表操作
CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...
- <JavaScript>尺寸类样式的获取
尺寸类样式的获取 offsetHeight HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数.(content+ ...
- JavaScript、CSS样式收集
JS集: //给from一个名字然后在JavaScript的地方就可以用form的名字来调用form表单里input元素的value属性可以得到值 var val=form_name.input_na ...
- Javascript访问css样式信息
DOM2级样式为style对象定义了一些属性和方法,可以通过这些方法属性来访问或者修改元素的样式信息: 1.cssText:可读写,在读的情况下以字符串形式返回元素的css代码,在写的情况下以字符串形 ...
- JavaScript更改css样式
来源:https://www.w3school.com.cn/js/js_htmldom_css.asp 1, document.getElementById(id).style.property = ...
- 配置dataimport时候 如果css样式有问题 要修改index和admin的版本号
随机推荐
- 嵌入式软件工程师C语言经典笔试1
一. 预处理器(Preprocessor) 1.1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEAR (60 * 6 ...
- A*(A_star)搜索总结
\(A^*(A star)\)搜索总结 标签:算法--搜索 阅读体验:https://zybuluo.com/Junlier/note/1299772 定义 先复制一则定义 \(A^*\)算法在人工智 ...
- python 合并字典/拼接字典
针对于python 3.5以上版本: 最好的最快的最优雅的方法是: result_dict = {**dict_1, **dict_2} 例如:( dict 代表 dictionary,也就是字典) ...
- python字符串学习总结
python字符串是不可变类型 所以没有添加和删除操作,更改元素,不会更改元素本身,可以用id(str) 测试,只有从新赋值新的对象才有效果.
- 03-CSS颜色、文本、字体、边框、背景
# Css颜色,文本字体 ## css颜色表示法1.颜色名表示,比如:red 红色,gold 金色 2.16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00 3.RGB颜色: 红 ...
- mybatis的if标签判断子类属性-There is no getter for property named 'export' in
1 <select id="findList" resultType="BndExport"> SELECT <include refid=& ...
- jQuery学习总结05-事件
1.事件的发生 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- VirtualBox中安装CentOS 7
1.如下所示图,点击“新建”,创建一个新的虚拟机 2.类型选择Linux,版本选择Red Hat,下一步 3.分配内存大小,电脑8G内存,所以分给虚拟机2G,选择下一步 4.选择“现在创建虚拟硬盘” ...
- CtfStudying之SSH私钥泄露
8/23/19 SSH私钥泄露 对于只是给定一个对应ip地址的靶场机器,我们需要对其进行扫描,探测其开放服务.我原来理解的渗透就是找到目标的漏洞,然后利用这些(这种)漏洞,最后拿到机器的最高权限:其实 ...
- [译]深度学习(Yann LeCun)
深度学习 严恩·乐库 约书亚•本吉奥 杰弗里·希尔顿 摘要深度学习是计算模型,是由多个处理层学习多层次抽象表示的数据.这些方法极大地提高了语音识别.视觉识别.物体识别.目标检测和许多其他领域如药物 ...