Question

I have lot of html page that use the old nested list that does not work correctly. I would like to dynamically look if a page uses it and add a class attribute or suggest the better way to do this.

Dynamically update all occurrences of

<ol type="a"> to <ol class="alpha">

Or suggest if there a way I can still use the type but apply a style using embedded CSS?

Answer 1

Without using JavaScript, you could use a CSS attribute-selector:

ol[type=a] {
    color: red;
}

JS Fiddle demo.

It’s important to note that this may also ‘not work correctly’ (a phrase I missed when first reading your question), depending upon how the ‘not working’ manifests itself, or what it is that doesn’t work.

If you feel you must use JavaScript, then the following works:

var ols = document.getElementsByTagName('ol');

for (var i=0, len=ols.length; i<len; i++){
    ols[i].className = ols[i].type == 'a' ? 'alpha' : '';
}

JS Fiddle demo.

If you want to remove the type attribute once the class is set:

var ols = document.getElementsByTagName('ol');

for (var i=0, len=ols.length; i<len; i++){
    if (ols[i].type == 'a') {
        ols[i].className = 'alpha';
        ols[i].removeAttribute('type');
    }        
}

JS Fiddle demo.