DOM 样式操作
通过js动态的修改样式
更新样式的方法：一、使用.style方法修改样式，缺点是使样式混杂在js中，再次修改不易。二、更新class属性，更改样式。三、一次性更改很多元素样式（如换肤操作），更改样式表。
设置HTML样式有三种方式：行内样式，内嵌样式，外部样式
一、访问元素的样式
element.style获得的样式只能是行内样式，获得不了外部样式表或嵌入样式表经层叠而来的样式
var style=window.getComputedStyle(element).color 可以获取实际样式（IE9以下不兼容）,获取行内样式，行内样式没有则获取样式表中的样式
如何实现浏览器兼容版的window.getComputedStyle
window.getComputedStyle能够获取元素的实际样式，但是低版本的ie8及以下不支持，如何在低版本的ie上兼容类似的功能。
function getComputedStyle(element) {
if(window.getComputedStyle) {
return window.getComputedStyle(element);
} else {
return element.currentStyle;
}
}
实现getStyle函数getStyle函数用于获取元素的实际样式，语法如下：var cssPropertyValue = getStyle (element, cssPropertyName)；
使用示例如下：
getStyle(element, "color") 返回element元素的显示颜色，如："rgb(0, 0, 0)"
getStyle(element, "line-height") 返回element元素的实际行高，如："30px" 请实现getStyle函数，要求浏览器兼容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#p1 {width: 100px;height: 200px;color: #09c;}
</style>
</head>
<body>
<p id="p1" style="margin:10px;">HHHH</p>
<script>
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr]; //只适用于IE
}
else
{
return getComputedStyle(obj,false)[attr]; //只适用于FF,Chrome,Safa
}
return obj.style[attr]; //本人测试在IE和FF下没有用,chrome有用
}
window.onload=function()
{
//调用
var oDiv=document.getElementByIdx_x('p1');
//alert(getStyle(oDiv,'width'));
alert(getStyle(oDiv,'margin-left'));
}
//查询了相关资料发现问题如下：
//style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。 （这里我测试的在IE和FF下没有用，Chrome下有用，所有有歧义）
//currentStyle可以弥补style的不足，但是只适用于IE。
//getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。
//
//注意：
//currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。
//如果要设置相应值，应使用style。
</script>
</body>
</html>
DOM 样式操作的更多相关文章
- DOM样式操作
CSS 到 DOM的抽象 通过操作 CSS 对应的 DOM对象来更新CSS样式 换肤操作 如何获取实际的样式(不仅有行内,更有页面和外联样式表中定义的样式) 样式表分为三类: 外联,页面,行内 内部样 ...
- jQuery使用（二）：DOM样式操作和属性操作
DOM取值与赋值 .html() .text() .size() 1.html()方法类似原生DOM的属性innerHTML,不传入参数的时候默认为取指定元素内的HTML内容,包含前后空白文本结构,以 ...
- Dom样式操作-属性操作
1. 对样式进行操作: 1) 以样式(C1,C2等)为最小单位进行修改. className, classList, (以列表形式获得) classList.add("C2"), ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- DOM操作之属性和样式操作
在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...
- javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
- Dom的样式操作和属性操作
如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...
- dom操作 属性操作 样式操作
jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...
- JQuery DOM操作（属性操作/样式操作/文档过滤）
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
随机推荐
- linux之SQL语句简明教程---主键,外来键
主键 (Primary Key) 中的每一笔资料都是表格中的唯一值.换言之,它是用来独一无二地确认一个表格中的每一行资料.主键可以是原本资料内的一个栏位,或是一个人造栏位 (与原本资料没有关系的栏位) ...
- 【LeetCode练习题】Minimum Window Substring
找出包含子串的最小窗口 Given a string S and a string T, find the minimum window in S which will contain all the ...
- php算法之快速排序
/** * 快速排序 * 原理: * 快速排序使用分治法(Divide and conquer)策略来把一个串行(list)分为两个子串行(sub-lists). * 最差时间复杂度 O(n*n) * ...
- Codeforces Round #312 (Div. 2) ABC题解
[比赛链接]click here~~ A. Lala Land and Apple Trees: [题意]: AMR住在拉拉土地. 拉拉土地是一个很漂亮的国家,位于坐标线.拉拉土地是与著名的苹果树越来 ...
- android笔记1——开发环境的搭建
Long Long ago...已经成为了历史,我还是要说出一个真相:早年前,那时候,android还不被大众所认知的时候,当然开发人员也没不像如今那样趋于饱和状态.一位大牛前辈,也是我的学长,那时候 ...
- HDU2054_A == B ?【模拟题】【大数】【水的问题】
A == B ? Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- TCP/IP详解之：IP选路 动态选路协议
第九章 IP选路 netstat -rn 显示路由表 初始化路由表的两种方法: 方法1:在配置文件中指定静态路由(不常用) 方法2:运行路由守护程序 或者 使用ICMP路由器发现报文 没有到达目的地的 ...
- Web应用的部署
本文将介绍一些Web应用的部署: 部署规则 要成功地部署一个Web应用,必须遵循以下目录结构. 1.WEB-INF一定要直接放到应用上下文(Webapp)之下. 2.classes目录必须直接放在WE ...
- php汉字转Unicode编码函数
/** * $str 原始字符串 * $encoding 原始字符串的编码,默认GBK * $prefix 编码后的前缀,默认"&#" * $postfix 编码后的后缀, ...
- Ajax表单提交及后台处理简单应用
首先先说下表单提交吧,要提交表单那么就得先收集表单数据(至于验证这个我就不说了,要说留下下次吧),有了jquery取个html的值还是简单$("xxid").val()等就完了,但 ...