Well the code I gave you should work, but you should look closer at the example.
Paramenter 1 is the list of elements you want to affect, the second parameter is the STYLE you want.
Now that I see its a 'toggle' you want, there is an easier way.
However, you need to pay attention to what I have said many times. CONSISTANT NAMING conventions!
rename your styles to match the corresponding ID and life becomes a LOT easier!! You did that for slogan, but not for company name
.companyNameS, .companyNameS_border
Doing that, this will work in ONE shot.

Code:
 
// here we define all the ids that we want to deal with into an array
var ID_arr=['companyName','slogan','cell','etc'];
// and this is our function to call on mouseup (Remember - a function is super-stacking commands
function applyClass(currid){
// convert the string to an array
// loop through each id in the array and apply the appropriate class
for (i = 0; i < ID_arr.length; i++){
// we loop through each element of ID_arr and add an S to the id to get the associated class.
//
classtoApply=ID_arr[i] + 'S';
if (ID_arr[i]==currid){
// in the case where the id in ID_arr is the one that made the call, we make it a border class
classtoApply += '_border';
}
// now we apply whichever class the function decided was appropriate
document.getElementById(ID_arr[i]).className=classtoApply;
}
}
revised PHP example code on how to call it this.id is passed to the function so it knows who is calling and needs to be 'bordered'
Code:
print "<span class=\"companyNameS\" id=\"companyName\" onMouseup=\"applyClass(this.id); \" style=\"font-family:$optn54; font-size:$fontsize; color:$optn2;\">$optn53</span>";
print "<span class=\"sloganS\" id=\"sloganS\" onMouseup=\"applyClass(this.id); \" style=\"font-family:$optn54; font-size:$fontsize; color:$optn2;\">$optn53</span>";
Mastering Javascript Arrays
FYI:
CSS stands for "Cascading" Style Sheets
Here is how to take advantage of the 'cascading' part.
Code:
.companyname, .companyname_border{
font-size: 14px;
font-weight: bold;
font-style:normal;
height:18px;
 
}
.sloganS,.sloganS_border {
font-size: 11px;
font-style: italic;
font-weight: bold; 
}
.companyname_border, .sloganS_border{
border:2px dotted #0CF;
}
This way if you change font-size you only need to edit it in ONE place
You can take it a step forward also if you want:
Code:
.companyname, .companyname_border{
font-size: 14px;
font-style:normal;
height:18px;
 
}
.sloganS,.sloganS_border {
font-size: 11px;
font-style: italic;
}
.companyname, .companyname_border, .sloganS, .sloganS_border{
font-weight: bold; 
}
.companyname_border, .sloganS_border{
border:2px dotted #0CF;
}