javascript获取非行间样式的方法(可以兼容各个浏览器)

实例:

HTML:

<div id=‘div1‘></div>

CSS:

#div1{width:200px; height:200px; background:red;}

//我们使用currentStyle和getComputedStyle来获取div元素的样式

//我们就单说一下getComputedStyle怎么使用吧!getComputedStyle有两个参数,其中第一个参数指的是你要获取哪个元素的样式,而第二个参数则是一个垃圾,你可以往里面放任何东西,包括你的名字都是可以的。如getComputedStyle(obj,null),或者getComputedStyle(obj,’gnn’),一般我们会把第二个参数设置成false。

function getStyle(obj,name){
    if(obj.currentStyle){
        //IE
        return obj.currentStyle[name];
    }else{
        //FF、Chrome
        return getComputedStyle(obj,false)[name];
    }
};
window.onload=function(){
    var odiv=document.getElementById(‘div1‘);
    alert(getStyle(odiv,‘width‘));//获取到div宽  alert(getStyle(odiv,‘backgroundColor‘));//背景颜色获取div的
}
时间: 2024-10-10 16:12:37

javascript获取非行间样式的方法(可以兼容各个浏览器)的相关文章

JavaScript获取非行间样式/定义样式

html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="stylesheet" href="css/style.css" type="text/css"> style标签内:<style> width:100px; </style> (3)行间样式(节点style属性定义的样式)比如:<div

继上一篇:获取非行间样式,此处有兼容问题

html格式: <body> <div id="div1" style="width:200px; height:200px; background:red;"> </div> js代码: window.onload=function () { var oDiv=document.getElementById('div1'); //alert(oDiv.style.width);     //style只能用来获取行间样式 //I

获取非行间样式的方法

了解css三种写入样式的方法 1. 内联: 写在style标签内 1 <style> 2 div { 3 width: 300px; 4 height: 300px; 5 border-width: 1px; 6 border-style: solid; 7 border-color: black; 8 background-color: pink; 9 } 10 </style> 2. 外联: 使用link标签导入 1 <link rel="stylesheet&

JavaScript获取非行间样式之currentStyle,getComputedStyle的使用

如果是行间样式我们可以直接用style来获取,但是如果是非行间样式,则style不起作用了,这里需要用到新的语法了. 1.currentStyle 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/

JavaScript获取非行间样式

<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> #div1 { width:100px; height:100px; background: red; } </style> </head> <body> <div id="div1

JS获取元素非行间样式的方法

currentStyle :只兼容IE浏览器 getComputedStyle :获取计算后的样式,不兼容IE6.IE7.IE8 如何获取非行间样式,同时兼容所有浏览器呢? window.onload=function(){ var oDiv1=document.getElementBy("div1"); if(oDiv.currentStyle){ //如果浏览器支持currentStyle oDiv.currentStyle.width; }else{ //如果浏览器不支持curr

Date对象,封闭空间,函数传参和封装,获取非行间样式,字符串操作

一.Date对象 1. 获取 oDate.getFullYear() 获取年份 oDate.getMonth()+1  获取月份( 0-11)----->1-12 oDate.getDate()  获取日 1-31 oDate.getHours() 获取小时 oDate.getMinutes() 获取分 oDate.getSeconds() 获取秒 oDate.getMilliseconds();   //毫秒 oDate.getDay() 获取星期几 0-6     0:星期天 例:数码时钟

JS获取非行间样式

我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? 首先让我们看一下js是如何获取行间样式的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona

获取非行间样式,数组

1.用style来获取的是行间样式,若是要获取非行间样式,则要采用currenStyle,getComputedStyle.在用参数的时候要用[]这个来框出来,不能用. 2.getComputedStyle(obj,false)[name]这个false可以换成别的,null也行.换成nul就报错. 3.alert(getStyle(oDiv, 'background'));这里获取的background 是一个复合的样式.这个地方如果是要获取'width'不能直接用width. 在函数传参的时