Применение стиля к выбранному div [Архив форума]

Torch`Ok

14.09.2012, 15:18

Есть несколько 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>

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

cyber

14.09.2012, 16:39

вот так , как то =)

<!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>

cyber

14.09.2012, 16:48

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

Torch`Ok

14.09.2012, 17:01

Это не совсем то... Нужно чтоб применялось к одному выбранному а не ко всем сразу... я вот что сделал но стиль применяется только после клика на див

<script language="JavaScript">
$(document).ready(Id);
function Id(){
$('.text').dblclick(function(){
var i = this.id;
document.getElementById(i).style.fontFamily=docume nt.getElementById('font').value;
document.getElementById(i).style.fontSize=document .getElementById('size').value;
});
}
</script>

можно ли сделать чтоб сразу и изменялся как в твоем примере???

cyber

14.09.2012, 17:03

ну так разница?
устанавливаешь класс "JS-Style-Generate"; любому элементу на странице и все ок
elems.className = "JS-Style-Generate";
щас только поправлю регулярки

cyber

14.09.2012, 17:08

вроде все ок

<!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>

Torch`Ok

14.09.2012, 17:11

Ок... Попробую... Спасибо

cyber

14.09.2012, 17:15

строка 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>

bes

14.09.2012, 17:35

<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>

sotik

17.09.2012, 10:38

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

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>

sotik

17.09.2012, 14:01

Все, нашел ошибки...
Правильное прописывание строк следующее:
cont.innerHTML = loading.innerHTML;
cont.innerHTML = xmlhttp.responseText;