js CSS的 float class宽高赋值不兼容处理方法(ie7,ie8,firefox)

css的"float"属性

【分析说明】网页特效访问一个给定css 值的最基本句法是:object.style.property,但部分css属性跟网页特效中的保留字命名相同,如"float","for","class"等,不同浏览器写法不同。

在ie中这样写:

document.getelementbyid("header").style.stylefloat = "left";
在firefox中这样写:

document.getelementbyid("header").style.cssfloat = "left";
【兼容处理】在写之前加一个判断,判断浏览器是否是ie:

if(document.all){  document.getelementbyid("header").style.stylefloat = "left";}else{  document.getelementbyid("header").style.cssfloat = "left";}
 

2. 访问<label>标签中的"for"

【分析说明】和"float"属性一样,同样需要使用不现的句法区分来访问<label>标签中的"for"。

在ie中这样写:

var myobject = document.getelementbyid("mylabel");var myattribute = myobject.getattribute("htmlfor");
在firefox中这样写:

var myobject = document.getelementbyid("mylabel");var myattribute = myobject.getattribute("for");
【兼容处理】解决的方法也是先 判断浏览器类型。

 

3. 访问和设置class属性

【分析说明】同样由于class是javascript保留字的原因,这两种浏览器使用不同的 javascript 方法来获取这个属性。

ie8.0之前的所有ie版本的写法:

var myobject = document.getelementbyid("header");var myattribute = myobject.getattribute("classname");
适用于ie8.0 以及 firefox的写法:

var myobject = document.getelementbyid("header");var myattribute = myobject.getattribute("class");
  另外,在使用setattribute()设置class属性的时候,两种浏览器也存在同样的差异。

  setattribute("classname",value);

  这种写法适用于ie8.0之前的所有ie版本,注意:ie8.0也不支持"classname"属性了。

  setattribute("class",value);适用于ie8.0 以及 firefox。

【兼容处理】

方法一,两种都写上:

var myobject = document.getelementbyid("header");myobject.setattribute("class","classvalue");myobject.setattribute("classname","classvalue"); //设置header的class为classvalue
方法二,ie和ff都支持object.classname,所以可以这样写:

var myobject = document.getelementbyid("header");myobject.classname="classvalue";//设置header的class为classvalue
方法三,先判断浏览器类型,再根据浏览器类型采用对应的写法。

 

4. 对象宽高赋值问题

【分析说明】firefox中类似 obj.style.height = imgobj.height 的语句无效。

【兼容处理】统一使用 obj.style.height = imgobj.height + 'px';

>

 

时间: 2024-12-14 07:11:16

js CSS的 float class宽高赋值不兼容处理方法(ie7,ie8,firefox)的相关文章

JS+CSS实现淡入式焦点图片幻灯切换效果的方法

 这篇文章主要介绍了JS+CSS实现淡入式焦点图片幻灯切换效果的方法,实例分析了javascript操作图片.css等元素实现幻灯片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS+CSS实现淡入式焦点图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

JS+CSS实现淡入式焦点图片幻灯切换效果的方法_javascript技巧

本文实例讲述了JS+CSS实现淡入式焦点图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

js+CSS实现弹出居中背景半透明div层的方法

 这篇文章主要介绍了js+CSS实现弹出居中背景半透明div层的方法,涉及javascript操作弹出div层的操作技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

js+CSS实现弹出居中背景半透明div层的方法_javascript技巧

本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

JS+CSS实现Div弹出窗口同时背景变暗的方法_javascript技巧

本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现的Div弹出窗口,同时背景变暗</title> <script>     function    locking(){      document.all.ly.style.display="block";      document.all.

用CSS的float属性创建三栏布局网页的方法

  三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一种用CSS的float和clear属性来获得三栏布局的方法. 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页. 基本方法 基本的布局包含五个div,即标题.页脚和三栏.标题和页脚占据

css hack定义兼容多浏览器ie6,ie7,ie8.firefox

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> .indexPicList{  height:210px;  padding-left:7px;  *padding-left:0px; } </style> </head> <body> <div id="i

兼容IE6/IE7/IE8/FireFox的CSS hack

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>区别IE6.IE

JS+CSS打造可拖动的聊天窗口层(兼容)

css|js|可拖动|聊天 <!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=&q