Remove style from selected span/text in div
Consider this snippet:
<div>
<span style="color:red;">a</span>
<span style="color:blue;">a</span>
<span style="color:white;">a</span>
</div>
How can you remove style from selected by user text?
Edited: to add clarifications from OP:
Thank you for your answers! I 开发者_运维问答had to be more precise. Sorry for that. What do I mean by "selected by user text": selected/highlighted with mouse. I have many divs with spans inside(just like it is below-no extra ids,classes for spans:/).
[...]
<div>
<span style="color:red;">a</span>
<span style="color:blue;">b</span>
<span style="color:white;">c</span>
</div>
<div>
<span style="color:red;">d</span>
<span style="color:blue;">a</span>
<span style="color:white;">a</span>
</div>
[...]
What I would like to achieve: user selects with mouse "ab", click button(input type=button) which remove style from selected span/spans. Similar behavior like it is in TinyMCE.
I'm not sure what you mean by "selected by user text", but if you mean that you want the user to be able to click on the text to remove its color, you could do it this way with jQuery:
Try it out: http://jsfiddle.net/v24fZ/
$(function() {
$('div > span').click(function() {
$(this).removeAttr('style');
});
});
Note that this will affect all <span> elements that are a child of a <div>, so better would be to place an ID attribute on the <div> to make sure you have the right one.
Try it out: http://jsfiddle.net/v24fZ/1/
<div id="myID"><span style="color:red;">a</span><span style="color:blue;">a</span><span style="color:white;">a</span></div>
then
$(function() {
$('#myID > span').click(function() {
$(this).removeAttr('style');
});
});
Also note that this will remove all inline styles. If you only want to remove the color, then do this:
Try it out: http://jsfiddle.net/v24fZ/2/
$(function() {
$('#myID > span').click(function() {
$(this).css('color', '');
});
});
- http://api.jquery.com/removeAttr/
- http://api.jquery.com/css/
- http://api.jquery.com/click/
"Remove style from selected by user text"
If you mean selecting by using a click event, it should be something like this:
var oldState = ""; //Code is untested, but I've written something similar recently
var $prevDiv;
$('#parentContainer span').click(function() {
if(!$(this).hasClass('selected')) //tracking what is currently selected.
{
if($prevDiv != null)
{
$prevDiv.removeClass('selected');
$prevDiv.attr('style', oldState);
}
$prevDiv = $(this);
$(this).addClass('selected');
oldState = $(this).attr('style');
$(this).attr('style', '');
}
else
{
//do nothing unless you need some reselected logic
}
}
I think @patrick dw covered the actual api for changing the attribute quite nicely, so I won't repeat it.
I totally agree with patrick.
You may want to try the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<span style="color:red;">a</span>
<span style="color:blue;">a</span>
<span style="color:white;">a</span>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("span").click(function(){
$(this).removeAttr("style");
});
});
</script>
</body>
</html>
加载中,请稍侯......
精彩评论