setAttribute()函数可以设置对象的属性,如果不存在此属性,则会创建此属性。
语法结构:
el.setAttribute(name,value)
参数列表:
参数 描述
name 必需。规定要设置的属性名。
value 必需。规定要设置的属性值。
代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <script type="text/javascript"> window.onload=function(){ var mydiv=document.getElementById("mydiv"); mydiv.setAttribute("id","newid"); alert(mydiv.getAttribute("id")); } </script> </head> <body> <div id="mydiv"></div> </body> </html>
以上代码可以重新设置div的id属性值,并且弹出新设置的id属性值。
实例二:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <script type="text/javascript"> window.onload=function(){ var mydiv=document.getElementById("mydiv"); mydiv.setAttribute("newAttr","attrValue"); alert(mydiv.getAttribute("newAttr")); } </script> </head> <body> <div id="mydiv"></div> </body> </html>
以上代码可以设置div的newAttr属性值,并且弹出此属性值。这里需要特别注意的是,因为div默认并不具有newAttr属性,这个时候setAttribute()函数会首先创建此属性,然后再给它赋值。
以上两个代码实例在各主流浏览器中都能够成功的执行,但这并不说明setAttribute()函数能够兼容各个浏览器。
再看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <style type="text/css"> .textcolor{ font-size:18px; color:red; } </style> <script type="text/javascript"> window.onload=function(){ var mydiv=document.getElementById("mydiv"); mydiv.setAttribute("class","textcolor"); } </script> </head> <body> <div id="mydiv"></div> </body> </html>
以上代码,在标准浏览器中能够将字体大小设置为18px,字体颜色设置为红色,但是在IE6和IE7浏览器中却不能够生效。
不过依然可以使用mydiv.getAttribute("class")获取属性值"textcolor"。
也就是说在IE6或者IE7浏览器中,setAttribute()函数可以使用,但是并不是对所有的属性都有效。
下面就列举一下存在上述问题的属性:
1.class
2.for
3.cellspacing
4.cellpadding
5.tabindex
6.readonly
7.maxlength
8.rowspan
9.colspan
10.usemap
11.frameborder
12.contenteditable
13.style
为了解决上述问题就要写一个通用的跨浏览器的设置元素属性的接口方法:
dom=(function(){ var fixAttr={ tabindex:'tabIndex', readonly:'readOnly', 'for':'htmlFor', 'class':'className', maxlength:'maxLength', cellspacing:'cellSpacing', cellpadding:'cellPadding', rowspan:'rowSpan', colspan:'colSpan', usemap:'useMap', frameborder:'frameBorder', contenteditable:'contentEditable' }, div=document.createElement('div'); div.setAttribute('class','t'); var supportSetAttr = div.className === 't'; return { setAttr:function(el, name, val){ el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val); }, getAttr:function(el, name){ return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name)); } } })();
首先,标准浏览器直接使用原始属性名;其次,IE6/7非以上列举的属性仍然用原始属性名;最后这些特殊属性使用fixAttr,例如class。
那么上面的代码实例修改为以下形式即可:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <style type="text/css"> .textcolor{ font-size:18px; color:red; } </style> <script type="text/javascript"> dom=(function(){ var fixAttr={ tabindex:'tabIndex', readonly:'readOnly', 'for':'htmlFor', 'class':'className', maxlength:'maxLength', cellspacing:'cellSpacing', cellpadding:'cellPadding', rowspan:'rowSpan', colspan:'colSpan', usemap:'useMap', frameborder:'frameBorder', contenteditable:'contentEditable' }, div=document.createElement('div'); div.setAttribute('class','t'); var supportSetAttr = div.className === 't'; return { setAttr:function(el, name, val){ el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val); }, getAttr:function(el, name){ return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name)); } } })(); window.onload=function(){ var mydiv=document.getElementById("mydiv"); dom.setAttr(mydiv, 'class', 'textcolor'); } </script> </head> <body> </body> </html>
以上代码可以在各主流浏览器中都有效,都可以将字体大小设置为18px,颜色设置为红色。
至于style属性可以使用el.style.color="xxx"这种形式进行兼容。
以上所述就是本文的全部内容了,希望大家能够喜欢。

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

Dreamweaver Mac版
视觉化网页开发工具