搜索
您的当前位置:首页正文

jQuery中的removeAttr('style

来源:二三娱乐

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>removeAttr</title>
    <script 
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").removeAttr("style");
            });
        });
    </script>
    <style>
        p:first-of-type{
            font-size:50px;
            color: red;
        }
    </style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p style="font-size:30px;color:blue">这是另一个段落。</p>
<button>移除所有P元素的样式属性</button>

</body>
</html>
Paste_Image.png

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>removeAttr</title>
    <script 
    </script>

</head>
<body>
<p style="font-size:50px;color:red">这是一个段落。</p>
<p style="font-size:30px;color:blue">这是另一个段落。</p>
<button>移除所有P元素的样式属性</button>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").removeAttr("style");
        });
    });
</script>

</body>
</html>
Paste_Image.png

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #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;

        }
    </style>
    <script type="text/javascript" 
</head>
<body>
    <div id="ct">
        <div id="header">header1</div>
        <div class="part">
        <div class="nav">nav1</div>
        <div class="content clearfix">
            <div class="aside">aside1</div>
            <div class="main">main1</div>
        </div>
        </div>
        <div class="part">
        <div class="nav">nav2</div>
        <div class="content,clearfix">
            <div class="aside">aside2</div>
            <div class="main">main2</div>
        </div>
        </div>
        <div class="part">
        <div class="nav">nav3</div>
        <div class="content clearfix">
            <div class="aside">aside3</div>
            <div class="main">main3</div>
        </div>
        </div>
        <div class="part">
        <div class="nav">nav4</div>
        <div class="content,clearfix">
            <div class="aside">aside4</div>
            <div class="main">main4</div>
        </div>
        </div>

        <div id="footer">
            footer
        </div>
    </div>

<script>
    $(".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);
            }

        })

    })
</script>
</body>
</html>
Paste_Image.png

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

Top