在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 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
上述代码执行完后，只有第二个段落发生变化，第一个段落不会发生变化。
如果我把p的属性都写成内联式，则都会变化：
<!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()方法设置属性，设置成功后样式是内联样式的形式（类似于<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" 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) 里面的样式，不能移除原有样式，但是若把原有样式写成内联样式的形式，则也会被移除！！！
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
