attr函数

最新推荐文章于 2021-09-28 12:28:44 发布

wtcsy

最新推荐文章于 2021-09-28 12:28:44 发布

阅读量2.1k

点赞数

分类专栏： javascript 随笔。。。。。。文章标签： function stylesheet attributes div input ie

本文链接：https://blog.csdn.net/wtcsy/article/details/6569880

版权

javascript 随笔。。。。。。专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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>

wtcsy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
attr函数

attr 函数就是给元素添加属性属性有2中元素本身就有的如 name id =======还有就是用户自定义属性如 vp 然后ie下的属性设置跟其他的浏览器有些区别简单记录一下设置元素的styleie6,7下面元素不能直接设置style这属性必须用元素样式的 cssText 来设置值一个例子 123123
复制链接

扫一扫