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

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 15:56 我要评论(0)

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';

>

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...