Opt for CSS selectors over JavaScript.

Learn about the CSS Focus selector here.

If you desire the code to function in the same way with the current DOM structure, follow this approach:

setupFocusBlurList([
    'f1,div_rssims_prefix',
    'f2,div_rssims_firstname',
    'f3,div_rssims_middlename'
]);

function setupFocusBlurList( elements ) {
    for( var i = 0;  i < elements.length;  i++ ) {
        var ee = elements[i].split(),
            input = document.getElementById( ee[0] ),
            div = document.getElementById( ee[1] );
        setupFocusBlur( input, div );
    }
}

function setupFocusBlur( input, div ) {
    input.onfocus = function() {
        input.style.border = '1px solid #0033CC';
        div.style.color = '#0033CC';
    };
    input.onblur = function() {
        input.style.border = '1px solid #ABADB3';
        div.style.color = '';
    };
}

However, there are alternative methods that could simplify this process. Do you have the ability to modify the HTML structure? Can jQuery be utilized? Depending on the HTML structure and jQuery usage, this code can be streamlined significantly.

For instance, consider structuring the HTML like this:

<div id="input-list">

    <div>
        <input id="f1" class="input-hilite">
        <div class="div-hilite" id="div_rssims_prefix"></div>
    </div>

    <div>
        <input id="f2" class="input-hilite">
        <div class="div-hilite" id="div_rssims_firstname"></div>
    </div>

    <div>
        <input id="f3" class="input-hilite">
        <div class="div-hilite" id="div_rssims_middlename"></div>
    </div>

</div>

Incorporating jQuery, you could use this code:

setupFocusBlurList( '#input-list' );

function setupFocusBlurList( wrapper ) {
    setupStyle( 'focus', '1px solid #0033CC', '#0033CC' );
    setupStyle( 'blur', '1px solid #ABADB3', '' );

    function setupStyle( event, inputBorder, divStyle ) {
        $(wrapper).on( event, '.input-hilite', function() {
            $(this).css( 'border', inputBorder )
                .parent().find('.div-hilite')
                    .css( 'color', divColor );
        });
    }
}

The code provided above could be simplified further depending on the specific HTML structure. Additionally, if the HTML resembles the example in Xotic750's answer:

<div id="container">
    <div id="div_rssims_prefix">Prefix
        <input id="f1" type="text" value="Prefix">
    </div>
    <div id="div_rssims_firstname">First Name
        <input id="f2" type="text" value="First Name">
    </div>
    <div id="div_rssims_middlename">Middle Name
        <input id="f3" type="text" value="Middle Name">
    </div>
</div>

Simply adjust the selectors accordingly in the jQuery code to achieve the desired functionality. In either case, note that using jQuery's event delegation method results in a more efficient code structure compared to traditional JavaScript approaches, especially with a large number of input fields.

Why not consider a different approach? Do you really have to store an array or list of IDs within your script? This solution should function well on IE7, although I am unable to test it myself.

Here is a suggested HTML structure:

<div id="container">
    <div id="div_rssims_prefix">Prefix
        <input id="f1" type="text" value="Prefix"></input>
    </div>
    <div id="div_rssims_firstname">First Name
        <input id="f2" type="text" value="First Name"></input>
    </div>
    <div id="div_rssims_middlename">Middle Name
        <input id="f3" type="text" value="Middle Name"></input>
    </div>
</div>

And the corresponding Javascript code:

var container = document.getElementById("container"),
    length1 = container.childNodes.length,
    i = 0,
    node1,
    length2,
    node2,
    j;

while (i < length1) {
    node1 = container.childNodes[i];
    if (node1 && node1.nodeType === 1 && /^div_rssims_\S+$/.test(node1.id)) {
        length2 = node1.childNodes.length;
        j = 0;
        while (j < length1) {
            node2 = node1.childNodes[j];
            if (node2 && node2.nodeType === 1 && /^f\d+$/.test(node2.id)) {
                node2.onfocus = function () {
                    this.style.border = 'solid 1px #0033CC';
                    this.parentNode.style.color = '#0033CC'
                }

                node2.onblur = function () {
                    this.style.border = 'solid 1px #ABADB3';
                    this.parentNode.style.color = ''
                }
            }

            j += 1;
        }
    }

    i += 1;
}

You can also view it on jsfiddle.

Alternatively, here's a more generic approach based on guessed HTML:

Javascript

function getElementsById(node, regex) {
    var nodeList = arguments[2] || [];

    if (node.nodeType === 1) {
        if (regex.test(node.id)) {
            nodeList.push(node);
        }

        node = node.firstChild;
        while (node) {
            getElementsById(node, regex, nodeList);
            node = node.nextSibling;
        }
    }

    return nodeList;
}

var inputs = getElementsById(document.getElementById("container"), /^f\d+$/),
    length = inputs.length,
    i = 0,
    node;

while (i < length) {
    node = inputs[i];

    node.onfocus = function () {
        this.style.border = 'solid 1px #0033CC';
        this.parentNode.style.color = '#0033CC'
    }

    node.onblur = function () {
        this.style.border = 'solid 1px #ABADB3';
        this.parentNode.style.color = ''
    }

    i += 1;
}

You can find this version on jsfiddle.

If you have control over your markup, consider a layout like this instead:

CSS

label {
    float: left;
    margin-right: 5px;
}
input {
    display: block;
}

HTML

<div id="container">
    <label for="f1">Prefix</label>
    <input id="f1" type="text" value="Enter value"></input>
    <label for="f2">First Name</label>
    <input id="f2" type="text" value="Enter value"></input>
    <label for="f3">Middle Name</label>
    <input id="f3" type="text" value="Enter value"></input>
</div>

Corresponding Javascript:

function getElementsById(node, regex) {
    var nodeList = arguments[2] || [];

    if (node.nodeType === 1) {
        if (regex.test(node.id)) {
            nodeList.push(node);
        }

        node = node.firstChild;
        while (node) {
            getElementsById(node, regex, nodeList);
            node = node.nextSibling;
        }
    }

    return nodeList;
}

function getPreviousSibling(element) {
    var p = element;

    do {
        p = p.previousSibling;
    } while (p && p.nodeType !== 1);

    return p;
}

var inputs = getElementsById(document.getElementById("container"), /^f\d+$/),
    length = inputs.length,
    i = 0,
    node;

while (i < length) {
    node = inputs[i];

    node.onfocus = function () {
        if (this.value === "Enter value") {
            this.value = "";
        }

        this.style.border = 'solid 1px #0033CC';
        getPreviousSibling(this).style.color = '#0033CC'
    }

    node.onblur = function () {
        if (this.value === "") {
            this.value = "Enter value";
        }

        this.style.border = 'solid 1px #ABADB3';
        getPreviousSibling(this).style.color = ''
    }

    i += 1;
}

You can check out this version on jsfiddle.