attr函数

scomouse

浏览: 14827 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (67)

社区版块

存档分类

attr 函数就是给元素添加属性

属性有2中

元素本身就有的如 name id =======

还有就是用户自定义属性如 vp

然后ie下的属性设置跟其他的浏览器有些区别简单记录一下

设置元素的style

ie6,7下面

元素不能直接设置style这属性

必须用元素样式的cssText 来设置值

一个例子

ie 6,下面

a.style.setAttribute('cssText',"color:#f00")

非ie6,7下面

a.setAttribute('style',"color:#f00")

修改input的type

ie 6,7,8下面(9没有测试) 已经添加到dom树上的input是不允许修改type的

非ie可以

一些元素的属性如 href|src|style

在ie下面写相对路径的时候取值会出现绝对路径

有种用法

a.getAttribute('href',2)

第2个参数为0,1,2

参考这个文章

还有透明度不一样

<!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="Content-Type" content="text/html; charset=gb2312" /><title>attr</title><link href="manage.css" mce_href="manage.css" rel="stylesheet" type="text/css" /></head><a id="a2">sssssss</a><div id="a1"></div><body><mce:script type="text/javascript"></mce:script></body></html>

上面瞎篡改代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>attr</title>
<link href="manage.css" mce_href="manage.css" rel="stylesheet" type="text/css" />
</head>

<a id="a2">sssssss</a>
<div id="a1"></div>
<body>
<script type="text/javascript">
(function(){
var div = document.createElement("div");
div.innerHTML = ' <link/><table></table><a href="/a" mce_href="a" style="color:red;float:left;opacity:.5;" mce_style="color:red;float:left;opacity:.5;">a</a><select><option>text</option></select><object><param/></object>';
var a = div.getElementsByTagName("a")[0];
window.support = {
style : /red/.test(a.getAttribute("style")),
opacity : a.style.opacity === "0.5",
hrefNormalized : a.getAttribute("href") === "/a"
};
})();

function attr(elem, name, value){
if (!elem || elem.nodeType == 3 || elem.nodeType == 8)
return undefined;

var set = value !== undefined;

//如果elem是元素
if(elem.tagName){
//这几个元素在ie下面要进行特殊的处理
var special = /href|src|style/.test(name);

//if (name == "selected" && elem.parentNode)
//elem.parentNode.selectedIndex;

//如果是元素原有的属性
if (name in elem && !special){
//存在 value值的情况
if (set){
//ie下面无法修已经存在的input 的 type
if ( name == "type" && elem.nodeName==="INPUT" && elem.parentNode )
throw "type property can't be changed";

elem[ name ] = value;
}

//如果不存在value 这个时候是获取这个值了
if( elem.nodeName==="FROM" && elem.getAttributeNode(name) )
return elem.getAttributeNode(name ).nodeValue;

return elem[name];
}

//在ie6,7下面不能直接用attribute来操作样式所以用cssText
if (!support.style && name == "style")
return arguments.callee( elem.style, "cssText", value );

//如果不是元素原有的属性且有值
if(set)
elem.setAttribute(name, "" + value);

//href|src|style 设置属性得用elem.getAttribute( name,2)
var attr = !support.hrefNormalized && special
// Some attributes require a special call on IE
? elem.getAttribute( name,2)
: elem.getAttribute( name );

return attr === null ? undefined : attr;
}

if (!support.opacity && name == "opacity" ) {
if (set) {
elem.zoom = 1;
elem.filter=(elem.filter || "").replace( /alpha\([^)]*\)/, "" )+ (parseInt( value ) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")");

}

return elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
(parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + '':
"";
}

//这个后面的主要应用于样式 elem.style
name = name.replace(/-([a-z])/ig, function(all, letter){
return letter.toUpperCase();
});

if (set)
elem[ name ] = value;

return elem[name];
}

window.onload = function(){
var div = document.getElementById('a1'),
a = document.getElementById('a2');
attr(div,'n',12312323);
attr(div,'style','height:200px;width200px');
attr(div.style,'background-color','#ff0000');
attr(div.style,'opacity',0.2);
attr(a,'href','http://www.baidu.com');
}
</script>
</body>
</html>