changing attribute of a span element using javascript where the class changes dynamically

Question

heres the problem, our css classnames for a span element keeps changing whenever we generate. so to simplify, we have a span element

<tr>
   <td>
       <span class=1234>My Name is BouncingHippo</span>
   </td>
        ....other well-defined DOM elements with id etc...
 </tr>

i have a radio button somewhere on the html, where onchange, it will change the font-color of the span element.

The span element has no id, no name, and a span class that changes all the time. My current method is brute-force getElementsByTagName() to return a specific line using innerHTML for every <tr> and insert the style attribute that way.

Is there a better way for this? Reason why span class changes every generation is for security purposes stipulated by our client..

EDIT 1

a rough concept on jsfiddle of the brute-force method that i have yet to get it working.. http://jsfiddle.net/3jVnJ/1/

Maybe target it from further up the DOM e.g. table tr td span - would work better if the table or it's parent has an ID or CLASS you could hang on to. — Billy Moat
– Billy Moat, Commented Sep 10, 2012 at 15:10
Could you show a live demo to show us what's going on? (Just to demonstrate, it doesn't have to be accurate beyond reflecting the changing class-names and insertion of new HTML). — David Thomas
– David Thomas, Commented Sep 10, 2012 at 15:14
You haven't described a meaningful algorithm for finding this <span>. Is it the only <span> tag in this particular table? Is it the only <span> tag with a class of all digits? Before one could code how to do this, you have to figure out what algorithm would be used for finding it? Can you at least require an id on the desired table? Or locate the identify the table by its location relative to other things? — jfriend00
– jfriend00, Commented Sep 10, 2012 at 15:24

jfriend00 · Accepted Answer · 2012-09-10 15:32:39Z

2

Here's one option based on the idea in your jsFiddle:

function findParentTag(obj, tag) {
    tag = tag.toUpperCase();
    while (obj && obj.tagName !== tag) {
        obj = obj.parentNode;
    }
    return(obj);
}

function changeColor(obj){
    var table = findParentTag(obj, "table");
    var spans = table.getElementsByTagName("span");
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].className) {
            spans[i].style.color = "red";
            break;
        }
    }
}

Working demo: http://jsfiddle.net/jfriend00/kZQJq/

answered Sep 10, 2012 at 15:32

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

scrappedcola · Accepted Answer · 2012-09-10 15:20:42Z

1

You could print out, from the server at generation, a js script tag with a variable that is the currently generated class name. Then you use the variable where you need to know what class that span is.

answered Sep 10, 2012 at 15:20

scrappedcola

10.6k1 gold badge36 silver badges48 bronze badges

Comments

eugene.polschikov · Accepted Answer · 2012-09-10 15:32:22Z

0

My assumption is: Element selection with attribute A dom=for each (e in document.gEBTN('E')) if (e.A) e

so for you it would be like smth for each (e in document.gEBTN('span')) if (e.class=="1234") e.className=”changedFont”;

answered Sep 10, 2012 at 15:32

eugene.polschikov

7,3392 gold badges35 silver badges44 bronze badges

Collectives™ on Stack Overflow

changing attribute of a span element using javascript where the class changes dynamically

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related