关于使用js的setAttribute和getAttribute取dom属性在ie ff safri下的问题
今天写一个导航时,用了一段纯js来设置html元素的css class类,代码如下:
var subdivs = obj.getElementsByTagName("DIV");
var subas = obj.getElementsByTagName("A");
if(subdivs.length>0){ if(subdivs[0].getAttribute("class") == "expendDiv"){if(tag==1){ subdivs[0].style.display = "block"; if(subas.length>0){subas[0].setAttribute("class",subas[0].getAttribute("class")+' '+'menuLi2'); }} else { subdivs[0].style.display = "none"; subas[0].setAttribute("class",'menuLi'); } }
}
在safari下面,没啥问题,导航正常显示,可是一换ie浏览器,出问题了,导航死活出不来。
于是,疯狂上网搜资料,总算找到了原因。原来getAttribute和setAttribute在不同浏览器,用法也有区别,下面我引用
一段搜到的资料来说明:
我们通过Js脚本对DOM 节点进行修改其样式class的时候,常常是使用如下的方式进行操作:
element.className = 'xxxClass';
而我们知道,element中有一个设置属性值的API——setAttribute(propertyName, propertyValue);那么我们会想,是否可以通过调用该API进行设置元素的样式class呢?答案是肯定的,代码如下:
element.setAttribute('className', 'xxxClass');
但通过在IE,FireFox,Chrome,safari,Opera等浏览器测试中发现,第二种设置样式class的方法,只能在IE下生效,而其他W3C标准的浏览器是无效的。
但通过改成另外一种方式,则在W3C下是生效的,但在IE下是无效的:
element.setAttribute('class', 'xxxClass');
从上面的结论中,我们可以看出,如果要使用setAttribute方法对元素节点进行设置样式class,则必须针对IE和其他W3C标准的浏览器分别设置class和className的属性名,但使用下面的快捷方式,则在各个浏览器中均有效:
element.className = 'xxxClass';
这就是为什么我们需要直接使用className进行设置的原因。
综上所述,我的代码只要把使用getAttribute和setAttribute的地方,全用className来代替就行了,替换后代码如下:
var subdivs = obj.getElementsByTagName("DIV");
var subas = obj.getElementsByTagName("A");
if(subdivs.length>0){ if(subdivs[0].className == "expendDiv"){if(tag==1){ subdivs[0].style.display = "block"; if(subas.length>0){subas[0].className = subas[0].className+' '+'menuLi2';//subas[0].setAttribute("className",subas[0].getAttribute("className")+' '+'menuLi2'); }} else { subdivs[0].style.display = "none";subas[0].className = "menuLi"; //subas[0].setAttribute("className",'menuLi'); } }
}
浏览器测试,问题解决。
关于使用js的setAttribute和getAttribute取dom属性在ie ff safri下的问题相关推荐
- js原生DOM属性值查找 getAttribute,设置setAttribute,移除removeAttribute
getAttribute()查找元素属性值,传入一个元素属性名称,不存在则返回null. const div = document.querySelector('#test') alert(div.g ...
- setAttribute() 与 getAttribute() 用法剖析及选项卡操作的实例展示,这一篇就够了
Ⅰ.在 MDN 上 setAttribute() 与 getAttribute() 函数的用法解释(很详细): 1.Element.setAttribute(): 其一.摘要: 设置指定元素上的某个属 ...
- setAttribute、getAttribute 和 getParameter
一.setAttribute setAttribute这个方法的作用就是保存数据,然后还可以用getAttribute方法来取出,在JSP内置对象session和request中都有这个方法. set ...
- jsp中setAttribute与getAttribute方法使用介绍
jsp中setAttribute与getAttribute方法使用介绍,然后还可以用getAttribute方法来取出. setAttribute.jsp页面源码实例,设置保存当前的日期: <% ...
- 关于js渲染网页时爬取数据的思路和全过程(附源码)
于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...
- 腾讯爬虫python_【Python爬虫+js逆向】Python爬取腾讯漫画!
前一段假期期间,博主已经自学完了Python反爬虫的相关内容,面对各大网站的反爬机制也都有了一战之力.可惜因实战经验不足,所以总体来说还是一个字--菜.前两天,在学习并实战爬取了博主最爱看的腾讯动漫后 ...
- js中setAttribute用法详解
jssetAttribute基本用法 element.setAttribute(attributename,attributevalue) setAttribute() 方法添加指定的属性,并为其赋指 ...
- java中setattribute_jsp中setAttribute与getAttribute方法使用介绍
jsp中setAttribute与getAttribute方法使用介绍,然后还可以用getAttribute方法来取出. setAttribute.jsp页面源码实例,设置保存当前的日期: -//W3 ...
- 运用用setAttribute和getAttribute
用setAttribute和getAttribute设置和获取模拟登陆的界面 getParamete与getAttribute的用法 HttpServletRequest类既有getAttribute ...
- setAttribute、getAttribute、removeAttribute
问题:下面两者的区别 box.setAttribute("liang", "456"); box.liang = 789; <body><di ...
最新文章
- vc sp6 中英文和补丁下载地址
- 关于“AI是不是胡扯”之争:这是中国科技圈的胜利
- Qt中的自定义模型类
- 【重点】Java大厂面试10个知识点汇总
- Android之JNI的使用
- 创校史纪录!26岁女博导发顶刊
- mysql集群_MySQL集群
- html 读取 vb,VB编程:vb读取textbox控件某一行的方法
- 动态规划与数学方程法解决楼层扔鸡蛋问题
- 7.Jenkins 权威指南 --- 分布式构建
- Python-OpenCV人脸检测(代码)
- 算法与数据结构 第3章 高级排序算法上 归并算法
- java osm_OSM初识(三)OSM Data
- 区块链是新的 Linux 而非新的互联网
- Win8各国语言包的安装,让系统变成你想要的语言版,带你体验不一样的输入法
- 知识图谱入门学习笔记(一)-概念
- 单工通信、半双工通信和全双工通信的区别
- (02)Cartographer源码无死角解析-(32) LocalTrajectoryBuilder2D::AddRangeData()→点云的体素滤波
- java合成tif图片_C# 将图片合成tif文件
- python_17(sql)