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的版本号
随机推荐
- linux系统中的基础监控（硬盘，内存，系统负载，CPU，网络等）
Linux系统常见日常监控 系统信息 查看 CentOS 版本号:cat /etc/redhat-release 综合监控 nmon 系统负载 命令:w(判断整体瓶颈) 12:04:52 up 1 ...
- Eclipse- 使用记录(1)
1.快捷键篇 (1)常用的快捷键: 1>ctrl+shift+R:查找源 2>ctrl+shift+G:查找引用 3>alt+Enter:查看某文件或文件夹的Properties ( ...
- 山区建小学（区间dp+前缀和+预处理）
[题目描述] 政府在某山区修建了一条道路,恰好穿越总共m个村庄的每个村庄一次,没有回路或交叉,任意两个村庄只能通过这条路来往.已知任意两个相邻的村庄之间的距离为di(为正整数),其中,0 < i ...
- Codeforces - 1198D - Rectangle Painting 1 - dp
https://codeforces.com/contest/1198/problem/D 原来是dp的思路,而且是每次切成两半向下递归.好像在哪里见过类似的,貌似是紫书的样子. 再想想好像就很显然的 ...
- 回溯--- Permutations
46.Permutations (Medium)](https://leetcode.com/problems/permutations/description/) [1,2,3] have the ...
- C++多态下的访问修饰符
C++多态下的访问修饰符 先上代码: class Parent { public: virtual void showMsg() { cout << "Parent showMs ...
- 09-js定时器、函数
# js定时器 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. **定时器在javascript中的作用** 1. ...
- PREPARE - 创建一个准备好的查询
SYNOPSIS PREPARE plan_name [ (datatype [, ...] ) ] AS statement DESCRIPTION 描述 PREPARE 创建一个已准备好的查询. ...
- nginx 实现浏览器文件下载服务
nginx 实现浏览器文件下载服务 2018/07/21 这里记录如何用 nginx 搭建一个简易的 file server,实现在浏览器上进行文件的下载操作. 要实现文件下载功能非常非常容易,不需要 ...
- 搭建Keepalived+LNMP架构web动态博客 实现高可用与负载均衡
环境准备: 192.168.193.80 node1 192.168.193.81 node2 关闭防火墙 [root@node1 ~]# systemctl stop firewalld #两台都 ...