Remove inline style using jquery plugin
Question
I tries to use this function :
Here is the full html:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="test" style="width:auto;max-width:150px;"></div>
<script>
(function($)
{
$.fn.removeStyle = function(style)
{
var search = new RegExp(style + '[^;]+;?', 'g');
return this.each(function()
{
$(this).attr('style', function(i, style)
{
return style.replace(search, '');
});
});
};
}(jQuery));
$(function(){
$('#test').removeStyle('width');
});
</script>
</body>
</html>
But I have get this problem:
<div id="test" style="max-"></div>
6 answers
solution1
3 2013-10-31 12:23:23
To do it the way you've posted: just modify your regex to match style , but don't match -style .
To do it the right way: you can simply use:
$('#test').css('width', '');
Here is the simple fiddle which demonstrates use of .css() to remove background.
solution2
2 ACCPTED 2013-10-31 12:39:03
I think you don't want to remove all styles, just the width: auto;
The regex matches *width:*, so it matches max- width: 150px; .
Try this instead:
var search = new RegExp('(^|;)' + style + '[^;]+;?', 'g');
This regex will expects a) the beginning of the string or b) a semicolon before it matches another part of the string.
See also here: http://jsfiddle.net/P5dfz/
solution3
1 2013-10-31 12:23:54
您应该使用jQuery的.css()来操纵样式：
$('#test').css("width","");
solution4
1 2013-10-31 12:33:16
(function($)
{
$.fn.removeStyle = function(style)
{
var search = new RegExp(style + '[^;]+;?', 'g');
return this.each(function()
{
$(this).css(style,'');
/*$(this).attr('style', function(i, style)
{
return style.replace(search, '');
});*/
});
};
}(jQuery));
$(function(){
$('#test').removeStyle('width');
});
Modified your function please see fiddle http://jsfiddle.net/UA9CF/
solution5
0 2013-10-31 12:29:51
如果要删除完整的内联样式属性，则可以简单地使用它。
$('#test').removeAttr('style');
solution6
0 2013-10-31 12:30:55
but you asked, how to remove inline-style, so if you want to remove the entire style tag from certain elements in a given scope you can try out something like below:
say your markup is like this:
<div id="parent">
<div style="background-color:red; width:100px; height:100px" >
<div style="background-color:green; width:50px; height:50px" >
</div>
</div>
</div>
<div style="background-color:#CCC; width:50px; height:50px" >
</div>
and you want to remove style tags of the elements inside the div with id parent :
$('div',"#parent").removeAttr('style'); //$(selector, scope)
or something even simple:
$("#parent").find('div,a').removeAttr('style'); //div,a or other element types
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.