Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.09.2012, 15:18
Аспирант
Отправить личное сообщение для Torch`Ok Посмотреть профиль Найти все сообщения от Torch`Ok
 
Регистрация: 12.09.2012
Сообщений: 43

Применение стиля к выбранному div
Есть несколько div-ов:
<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 id="font"><select>
 <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">Comic Sans MS</option>
</select></div>

<div id="size"><select>
 <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 к нему можно было применить данные стили... Желательно через jquery т.к. он уже подключен и меньше будет кода... я вот что набросал:
$(document).ready(
function (){
     $('.text').click(function(){
           var i = this.Id;//получаем id элемента на котором кликнули
		
	});
	});

Можно ли эту переменную "i" как-то вставить в событие onchange чтобы
выбранный шрифт применялся к этому div
<div id="font"><select onchange="document.getElementById('i').style.fontFamily=this.value">
 <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">Comic Sans MS</option>
</select></div>

Или предложите может какой другой вариант

Последний раз редактировалось Torch`Ok, 14.09.2012 в 15:48.
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2012, 16:39
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.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>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 14.09.2012, 16:48
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

можно добавлять новые стили указав в атрибуте type-style , какое свойство менять
<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>

<!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> 
    <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>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #4 (permalink)  
Старый 14.09.2012, 17:01
Аспирант
Отправить личное сообщение для Torch`Ok Посмотреть профиль Найти все сообщения от Torch`Ok
 
Регистрация: 12.09.2012
Сообщений: 43

Это не совсем то... Нужно чтоб применялось к одному выбранному а не ко всем сразу... я вот что сделал но стиль применяется только после клика на див
<script language="JavaScript">
$(document).ready(Id);
function Id(){
     $('.text').dblclick(function(){
		var i = this.id;
		document.getElementById(i).style.fontFamily=document.getElementById('font').value;
		document.getElementById(i).style.fontSize=document.getElementById('size').value;
		});
	}
</script>

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

ну так разница?
устанавливаешь класс "JS-Style-Generate"; любому элементу на странице и все ок
elems.className = "JS-Style-Generate";
щас только поправлю регулярки
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #6 (permalink)  
Старый 14.09.2012, 17:08
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.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>
 <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>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 14.09.2012, 17:11
Аспирант
Отправить личное сообщение для Torch`Ok Посмотреть профиль Найти все сообщения от Torch`Ok
 
Регистрация: 12.09.2012
Сообщений: 43

Ок... Попробую... Спасибо
Ответить с цитированием
  #8 (permalink)  
Старый 14.09.2012, 17:15
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

строка 79
<!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="special">Текст</div>
<div id="txt2" class="text">Текст</div>
<div id="txt3" class="special">Текст</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="special">Текст</div>
<div id="txt9" class="text">Текст</div>
<div id="txt10" class="special">Текст</div>   
    </div> 
 
    
    <script>

      function _(selector){
      
      return document.querySelectorAll(selector)[0];
      }

  !function (){
    var style, type ,value;
    var param = _('#style');
    var elems = document.getElementsByClassName('special');
    
   
      param.onchange = function (e){
      
       var target = e.target;
       type = target.getAttribute("type-style");
       value = target.value;
      if (!value || value==" ")return;
        
        setStyle();
        
        //что бы задать определным div'aм можно так сделать
        for (var i = elems.length;i--;){
        elems[i].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+";}");
          }
          
        
          style.innerHTML = strFind;
        } 
        
      function create() {
        
        style = document.createElement('style');
         
        style.innerHTML = ".JS-Style-Generate{"+type+":"+value+";}";
        
        document.head.appendChild(style);
        
        }
  
   
   
      }();
    </script>

  </body>
</html>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #9 (permalink)  
Старый 14.09.2012, 17:35
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<select>
	<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">Comic Sans MS</option>
</select>

<select>
	<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 id="div">
	<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>
window.onload = function () {
	var elems = document.body.children;
	var div = elems[2];
	
	elems[0].onchange = function () {
		var elem = document.getSelection().anchorNode.parentNode;
		if (elem.parentNode.id == 'div') {
			elem.style.fontFamily = this.value;
		}
	}
	
	elems[1].onchange = function () {
		var elem = document.getSelection().anchorNode.parentNode;
		if (elem.parentNode.id == 'div') {
			elem.style.fontSize = this.value;
		}
	}
	
}
</script>
Ответить с цитированием
  #10 (permalink)  
Старый 17.09.2012, 10:38
Профессор
Отправить личное сообщение для sotik Посмотреть профиль Найти все сообщения от sotik
 
Регистрация: 14.09.2012
Сообщений: 158

Подскажите пожалуйста, почему не подгружается контент?

function incclik()
{
var cont = document.getElementById('contentBody');
var loading = document.getElementById('loading');
cont.xmlhttp = loading.xmlhttp;
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open( 'GET', 'content.php?setincfram=true', false );
xmlhttp.send( null );
if(xmlhttp.status == 200) {

cont.xmlhttp = xmlhttp.responseText;
}
}
// это функция...
// а это на страничке:
<div id="contentBody">
</div>
<div id="loading" style="display: none">
Идет загрузка...
</div>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При нажатии на ссылку раскрываются все div anonimous jQuery 1 09.08.2012 14:49
Применение стиля к 1 из элементов в href tommy jQuery 4 13.06.2012 18:32
При прокрутке страницы div залазит на футер. Как поправить? DonaldDrug jQuery 8 27.03.2012 02:15
проблема с div И animate g00000dman jQuery 2 24.03.2011 23:34
Применение стиля для родителя при выбраном чекбоксе house.wm jQuery 6 22.04.2010 11:35