在jQuery中使用removeAttr('style')并不能夠移除<style> 標簽里面元素的屬性（內(nèi)部樣式），它只能移除類似于 <p style="font-size:30px;color:blue"> style里面的內(nèi)容（內(nèi)聯(lián)樣式），因為removeAttr是移除指定屬性用的，而<style> 標簽里面的內(nèi)容設置的元素的屬性不屬于這個范疇。舉個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>removeAttr</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</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
上述代碼執(zhí)行完后，只有第二個段落發(fā)生變化，第一個段落不會發(fā)生變化。
如果我把p的屬性都寫成內(nèi)聯(lián)式，則都會變化：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>removeAttr</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</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()方法設置屬性，設置成功后樣式是內(nèi)聯(lián)樣式的形式（類似于<p style="font-size:30px;color:blue">我是段落<p>）而不是內(nèi)部樣式的形式（ 類似于<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" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</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) 里面的樣式，不能移除原有樣式，但是若把原有樣式寫成內(nèi)聯(lián)樣式的形式，則也會被移除?。?！
**本文版權歸本人即簡書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請注明出處。謝謝！ *
