Показать сообщение отдельно
  #2 (permalink)  
Старый 14.09.2012, 16:39
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

вот так , как то =)
<!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>
    </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> 
    <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+':.+;','ig');
         
          
          if (strFind.search(regE) != -1){ 
          
           strFind = strFind.replace(regE,type+':'+value+';')
          
            
          } else {
          
             strFind = strFind.replace(/\}/g,type+":"+value+";}");
          }
          console.log(strFind.match(/\}/g));
        style.innerHTML = strFind;
        } 
        
      function create() {
        
        style = document.createElement('style');
         
        style.innerHTML = ".JS-Style-Generate{"+type+":"+value+";}";
        
        document.head.appendChild(style);
        
        }
  
   
   
      }();
    </script>

  </body>
</html>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием