Styling Span with JS not working ?

[Siberian]

I want to style only a span using javascript; I'm using:
variable name.className="";

Everythihing in the Div is whatever color I set for the style, instead of strictly the span ?

[diafol]

I you show the html snippet and the script you're using it would help.

[Siberian]

Snippet. I want to style, only the word "lets"

[rtrethewey]

Brute force method:

var one = document.getElementById("paper");
one.innerHTML ="<span id='lets'>Lets</span> go to the...";
one.className="sen";
document.getElementById('lets').style.color = 'blue';

[diafol]

Maybe replacing the span and then replacing the rest of the div separately. This will stop you havig to hardcode the span every time you want to change the text. Of course this depends on what you're trying to do.

<div id="sometext">
    <span>Let's</span>
    <span> do something...</span>
</div>

You could even do without classnames in your CSS.

using

#sometext + span{ ... }

#sometext + span + span{...}

and queryselectors for replacements. Just an idea.

[Siberian]

DiaFol - Your method requires multiple spans; I don't quite understand your code is it jQuery ?

[lps]

Your question is about 'I want to style only a span using javascript'. I assume your code maybe consist of more than one span. Eg. (copied from @diafol)

<div id="sometext">
    <span>Let's</span>
    <span> do something...</span>
</div>

so, what you wisht to do in jquery to style only the desired span, Eg, the first span, then I will add in the class attribute and made the code like

<div id="sometext">
    <span class="style_me">Let's</span>
    <span> do something...</span>
</div>

jquery code:

$(document).ready(function(){
    $('span.style_me').css({width:300px;background:#565656;})
});

[diafol]

DiaFol - Your method requires multiple spans; I don't quite understand your code is it jQuery ?

No, it's css. From what I can gather, you're just replacing text with in a span and the text following the span. It's not clear whether you will be doing this many times or just the once. If many, then you want code that is easily maintainable - so just plain text - no html tags or properties in the replacement text. I avoided jQuery as it appeared that you were using vanilla js.

I you query the dom for spans within div where id = sometext, you'll get 2 elements, you can replace the text on element[0] and element[1].

The styling is taken care of with:

#sometext + span{color: blue;} /* styles first span */
#sometext + span + span{color: red;} /* styles second span */

Alternatively, you could leave off the second span altogether.

[Siberian]

diafol - Are you saying you can style multiple spans using span + span and so forth with the first span starting at the top of the DOM ?

[diafol]

That wasn't really the pont I was making, but sure you can. You'd have to be careful though since changes to the markup could affect the styling. This simply allows you to do away with all the 'classitis' that seems to pervade sites. These selectors are usually recommended for a specific element.

http://www.w3schools.com/cssref/css_selectors.asp

e.g. #someDivId > span + span

So not really 'starting at the top' of the DOM, but you could I suppose. Equally you could use :nth-child(n) from CSS3 spec.

[Siberian]

Can you reiterate your point, if you don't mind after being a little side tracked, although not a negative side track.

[diafol]

Ok, the point I was making was that if you have a number of replacements to make into this DIV, then it may be better to just store the replacements as text, rather than encumber them with markup. For example:

<div id="bah">
    <span>
       This is span text
    </span>
    <br />
    This is naked
</div>

<script>
    var spanText = "Hello";
    var nodeText = "New text"

    var div = document.getElementById("bah");
    var spans = div.getElementsByTagName('span');

    spans[0].innerText = spanText;
    div.lastChild.data = nodeText;
</script>

In order to prevent XSS, you could create a textnode before making the replacement, but that's another issue.