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的版本号
随机推荐
- MySQL学习笔记（上）
在进行SQL注入原理的剖析的时候,对MySQL数据库掌握薄弱,参照菜鸟教程的MySQL教程速刷一遍MySQL 关于MySQL MySQL是最流行的关系型数据库管理系统,在WEB方面MySQL是最好的R ...
- 使用IntelliJ IDEA配置Tomcat（详细操作）
一,下载Tomcat 1.进入官网Http://tomcat.apache.org/,选择download,下载所需要的Tomcat版本.(注意:最好下载Tomcat 7 或者Tomcat 8 因为最 ...
- SCUT - 77 - 哈利波特与他的魔法杖 - 线段树
https://scut.online/p/77 线段树的一种奇怪的应用,暴力区间更新,每次update直接pushdown到底部,然后从维护底部.这样下次update的时候假如提前遇到底部就很快返回 ...
- python字符串内置函数汇总
1.capitalize 第一个单词首字母大写 2.title 每个单词首字母大写 3.upper 每个字母变大写 4.lower 每个字母变小写 5.len() 字符串长度 6.format() 格 ...
- 分布式唯一ID生成器
在应用程序中,经常需要全局唯一的ID作为数据库主键.如何生成全局唯一ID? 首先,需要确定全局唯一ID是整型还是字符串?如果是字符串,那么现有的UUID就完全满足需求,不需要额外的工作.缺点是字符串作 ...
- DAG
DAG的生成 DAG(Directed Acyclic Graph) 叫做有向无环图,原始的RDD通过一系列的转换就形成了DAG,根据RDD之间的依赖关系的不同将DAG划分成不同的Stage,对于窄依 ...
- Mac更改PHP默认目录的方法
参考:http://www.cnblogs.com/muyunlee/p/6386095.html
- goland使用：导入一个github开源项目tidb
概要:在windos下的IDEA 的go语言的编辑器 goland的使用,导入github上面的开源项目. 问题: 下载好goland之后,open project打开一个下载好的githubhub项 ...
- 脚本_查看所有虚拟机磁盘以及 CPU 的使用量
#!bin/bash#作者:liusingbon#功能:查看所有虚拟机磁盘使用量以及 CPU 使用量信息read -p "按任意键进入查看页面.比如按下Enter键" keyvir ...
- VNware上安装虚拟机Ubuntu16.10 并安装petalinux
1.下载 VMware VMware-workstation-full-15.0.0-10134415.exe 自己寻找激活码 Ubuntu镜像 UG1144 PetaLinux Tools Docu ...