вроде все ок
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<div id='style'>
<select type-style='font-family'>
<option value="">--Выберите шрифт--</option>
<option value="Verdana">Verdana</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier">Courier</option>
<option value="Arial">Arial</option>
<option value="Tahoma">Tahoma</option>
<option value="Georgia">Georgia</option>
<option value="Comic Sans MS" selected>Comic Sans MS</option>
</select>
<select type-style='font-size'>
<option value="10px">-10px-</option>
<option value="12px">-12px-</option>
<option value="14px">-14px-</option>
<option value="16px">-16px-</option>
<option value="18px">-18px-</option>
<option value="20px">-20px-</option>
<option value="24px">-24px-</option>
<option value="28px">-28px-</option>
<option value="32px">-32px-</option>
<option value="36px">-36px-</option>
<option value="40px">-40px-</option>
<option value="48px">-48px-</option>
<option value="54px">-54px-</option>
</select>
<select type-style='color'>
<option value="">выберите цвет</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
<option value="black">black</option>
</select>
</div>
<div id='elems'>
<div id="txt1" class="text">Текст</div>
<div id="txt2" class="text">Текст</div>
<div id="txt3" class="text">Текст</div>
<div id="txt4" class="text">Текст</div>
<div id="txt5" class="text">Текст</div>
<div id="txt6" class="text">Текст</div>
<div id="txt7" class="text">Текст</div>
<div id="txt8" class="text">Текст</div>
<div id="txt9" class="text">Текст</div>
<div id="txt10" class="text">Текст</div>
</div>
<div id='see'></div>
<script>
function _(selector){
return document.querySelectorAll(selector)[0];
}
!function (){
var style, type ,value;
var param = _('#style');
var elems = _("#elems");
param.onchange = function (e){
var target = e.target;
type = target.getAttribute("type-style");
value = target.value;
if (!value || value==" ")return;
setStyle();
elems.className = "JS-Style-Generate";
}
function setStyle () {
if (!style){
create();
return;
}
var strFind = style.innerHTML;
var regE = new RegExp(type+':\\w+;','i');
if (strFind.search(regE) != -1){
strFind = strFind.replace(regE,type+':'+value+';')
} else {
strFind = strFind.replace(/\}/,type+":"+value+";}");
}
_('#see').innerHTML = strFind;
style.innerHTML = strFind;
}
function create() {
style = document.createElement('style');
style.innerHTML = ".JS-Style-Generate{"+type+":"+value+";}";
document.head.appendChild(style);
}
}();
</script>
</body>
</html>