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的版本号
随机推荐
- little-endian And big-endian
coming from http://zhidao.baidu.com/link?url=B_7AA_O6TkCVlKw9t_Xifu6TzpaFUiDEVkH1iTRT4vUGD0uRmazwduf ...
- [Python3 填坑] 016 对 __getattr__ 和 __setattr__ 举例
目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 __getattr__ 2.2 __setattr__ 1. print( 坑的信息 ) 挖坑时间:2019/04/07 明细 坑的编码 ...
- UVA-10600.Contest and Blackout.(Kruskal + 次小生成树)
题目链接 本题思路:模版的次小生成树问题,输出MST and Second_MST的值. 参考代码: #include <cstdio> #include <cstring> ...
- 教你使用Python制作酷炫二维码
这篇文章讲的是如何利用python制作狂拽酷炫吊炸天的二维码,非常有趣哦! 可能你见过的二维码大多长这样: 普普通通,平平凡凡,没什么特色... 但,如果二维码长这样呢! 或者 这样! 是不是炒鸡好看 ...
- java 线程池（线程的复用）
一. 线程池简介 1. 线程池的概念: 线程池就是首先创建一些线程,它们的集合称为线程池.使用线程池可以很好地提高性能,线程池在系统启动时即创建大量空闲的线程,程序将一个任务传给线程池,线程池就会启动 ...
- 剑指offer学习读书笔记--二维数组中的查找
在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都是按照从上到下递增的顺序排序.请设计一个函数,输入这样的一个二维数组和一个整数,判断数组是否含有这个整数. 1 2 8 9 2 4 9 1 ...
- JavaScript深入之从原型到原型链(转载)
构造函数创建对象 我们先使用构造函数创建一个对象: function Person() { } var person = new Person(); person.name = 'Kevin'; co ...
- Tomcat 保存镜像实战操作( 目录挂载方法 )
查看数据保存的位置 docker inspect --format='{{.Mounts}}' mxg_tomcat 宿主机数据保存在 /usr/local/project , 将此路径数据备份在 b ...
- JSP学习(2)
JSP学习(2) JSP简介 Java Server Page,其根本是一个简单Servlet设计. 常用的动态网站开发技术 JSP:安全性高,适合开发大型的,企业级或分布式的Web应用程序. Asp ...
- Conference - open source drives IOT from device to edge
Open source drives IOT from device to edge 以下都是针对IOT领域的项目: ACRN A Big Little Hypervisor for IoT Deve ...