jQuery中的removeAttr(\'style\')浅谈

发布时间:2016-11-21 11:21 阅读:498

文/饥人谷 任务5班-李彩

本文著作权归作者所有;如需转载请联系饥人谷,并注明原文出处

在jQuery中使用removeAttr('style')并不能够移除 标签里面元素的属性(内部样式),它只能移除类似于 <p style="font-size:30px;color:blue"> style里面的内容(内联样式),因为removeAttr是移除指定属性用的,而 标签里面的内容设置的元素的属性不属于这个范畴。举个例子:


    removeAttr

        $(document).ready(function(){
            $("button").click(function(){
                $("p").removeAttr("style");
            });
        });

        p:first-of-type{
            font-size:50px;
            color: red;
        }

这是一个标题
这是一个段落。
这是另一个段落。
移除所有P元素的样式属性

上述代码执行完后,只有第二个段落发生变化,第一个段落不会发生变化。 如果我把p的属性都写成内联式,则都会变化:


    removeAttr

这是一个段落。
这是另一个段落。
移除所有P元素的样式属性

    $(document).ready(function(){
        $("button").click(function(){
            $("p").removeAttr("style");
        });
    });

在这里顺便提一下,就是我们使用jQuery中的.css()方法设置属性,设置成功后样式是内联样式的形式(类似于<p style="font-size:30px;color:blue">我是段落<p>)而不是内部样式的形式( 类似于p{font-size:30px;color:blue}) 例如看下面的例子:


    Title

        #ct{
            width: 800px;
            margin: 0 auto;
        }
        #header{
            background-color: red;
            text-align: center;
            height: 80px ;
            line-height: 80px;
            margin-bottom: 20px;
        }
        .nav{
            background-color: blue;
            height: 50px;
        }
        .aside{
            float: left;
            width: 200px;
            height: 400px;
            background-color: green;
        }
        .clearfix:after{
            content: "";
            clear: both;
            display: block;

        }
        .content{
            height: 400px;
            margin-bottom:20px ;
        }
        .main{
            height: 400px;
            margin-left: 210px;
            background-color: yellow;
        }
        #footer{
            background-color: #666;

        }

        header1

        nav1

            aside1
            main1

        nav2

            aside2
            main2

        nav3

            aside3
            main3

        nav4

            aside4
            main4

            footer

    $(".nav").each(function () {
        var $cur=$(this),
                eleOffsetH=$cur.offset().top ,
                eleOffsetW=$cur.offset().left,
                eleHeight=$cur.height(),
                eleWidth=$cur.width();

        eleClone=$cur.clone();
        $cur.before(eleClone);
        eleClone.hide();

        $(window).on("scroll",function () {
            var scrollH=$(this).scrollTop();
            if (scrollH >= eleOffsetH) {
                if ($cur.data("isFixed")){return}

                $cur.css({
                    "position":"fixed",
                    "left":eleOffsetW,
                    "top":0,
                    "width":eleWidth,
                    "height":eleHeight,
                    "z-index":999
                });
                $cur.data("isFixed",true);
                eleClone.show();

            }
            else {
                eleClone.hide();
                $cur.removeAttr('style');
                $cur.data("isFixed",false);
            }

        })

    })

因此,上述代码 中的$cur.removeAttr('style'); 只能移除 $cur.css(XXXX) 里面的样式,不能移除原有样式,但是若把原有样式写成内联样式的形式,则也会被移除!!!

可以输入140个字