Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
allanmiln
1 / 1 / 1
Регистрация: 27.01.2013
Сообщений: 55
1

Как оптимизировать скрипт, который меняет ширину блока

08.02.2013, 00:00. Просмотров 495. Ответов 4
Метки нет (Все метки)

Вот скрипт, который меняет ширину блока.
Есть две ссылки, которые выполняют по клику функции reduceBlock() и increaseBlock(). По нажатии на первую, ширина блока увеличивается и сама ссылка скрывается, открывая вторую, которая работает наоборот.
Как можно сократить этот код?

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
function reduceBlock(){
document.getElementById('edittemplate').style.width = '1150px';
document.getElementById('resize').style.width = '1150px';
document.getElementById('reduce').style.display = "none";
document.getElementById('increase').style.display = "inline";
}
 
function increaseBlock(){
document.getElementById('edittemplate').style.width = '850px';
document.getElementById('resize').style.width = '850px';
document.getElementById('reduce').style.display = "inline";
document.getElementById('increase').style.display = "none";
}
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.02.2013, 00:00
Ответы с готовыми решениями:

Как задать ширину блока div?
Как задать ширину блока див, чтоб она была равна 90% от общей ширины экрана - 320рх (ширина...

Как посчиать ширину блока относительно экрана?
Есть три div'a: Слева - ширина 220px (он с position:fixed) Справа - 300px; В центре - резиновый,...

Как изменить ширину блока div уже загруженной страницы
Например, при использовании фреймов это сделать легко - просто зацепить мышью за вертикальную...

Скрипт, который меняет значение ячейки на другое
Подскажите пожалуйста, у меня есть файл. на листе 1 есть список элементов в столбце B, на листе 2 в...

Как задать ширину блока относительно соседского блока?
В HTML что-то вроде этого: <div class="article"> <div class="title"> <h2>Something...

4
Joker555
10 / 10 / 1
Регистрация: 25.10.2012
Сообщений: 361
08.02.2013, 01:04 2
Ничего не понятно, объясните нормально, что Вам нужно сделать?
0
Mysterious Light
Эксперт по математике/физике
4094 / 2003 / 410
Регистрация: 19.07.2009
Сообщений: 3,022
Записей в блоге: 22
08.02.2013, 01:48 3
Javascript
1
2
3
4
5
6
7
8
9
10
/* НИКОГДА НЕ ПИШИТЕ В ТАКОМ СТИЛЕ */
var reduceBlock, increaseBlock;
(function(){
function g(i){return document.getElementById(i);}
function w(i,v){g(i).style.width=v;}
function d(i,v){g(i).style.display=v;}
function change(z,x,c,v){w('edittemplate',z);w('resize',x);d('reduce',c);d('increase',v)}
reduceBlock = function(){change('1150px','1150px',"none","inline");};
increaseBlock = function(){change('850px','850px',"inline","none");};
})();
2
allanmiln
1 / 1 / 1
Регистрация: 27.01.2013
Сообщений: 55
08.02.2013, 12:00  [ТС] 4
Mysterious Light, а в onclick что написать нужно?

/* НИКОГДА НЕ ПИШИТЕ В ТАКОМ СТИЛЕ */
Почему?
0
Mysterious Light
Эксперт по математике/физике
4094 / 2003 / 410
Регистрация: 19.07.2009
Сообщений: 3,022
Записей в блоге: 22
08.02.2013, 18:42 5
Исходно стоял вопрос «как можно сократить количество кода для двух функций-обработчиков».
Код написан «из головы», поэтому за его корректность не ручаюсь, но должен работать, притом функционально также. Иными словами, если у Вас были исходно
Цитата Сообщение от allanmiln Посмотреть сообщение
две ссылки, которые выполняют по клику функции reduceBlock() и increaseBlock()
то в html у Вас было что-то типа
HTML5
1
2
<a href="#" onclick="reduceBlock();">reduce</a>
<a href="#" onclick="increaseBlock();">increase</a>
И при замене Ваших 13 строчек на мои 10 всё будет работать по-прежнему.

Единственное, что сделал, это обозначил много раз повторяющуюся связку document.getElementById буквой g, а также связки style.width и style.display через w и d.

А писать в подобном стиле в подобном случае не стоит как минимум потому, что для понимания того, что происходит в функциях reduceBlock и increaseBlock, нужно мысленно «распарсить» ещё 4 функции и осознать, что они делают, в то время как в Вашем коде даже вчитывать не надо — сразу понятно, что происходит какое-то типичное преобразование стилей каких-то объектов.

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
08.02.2013, 18:42
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.02.2013, 18:42

Боковая панель свойств меняет свою ширину. Как отключить?
Всем привет! Являюсь давним пользователем CorelDRAW. Установил CorelDRAW X8. Проблема: Боковая...

Как увеличить ширину блока
Здравствуйте. По адресу http://faridos.com/test/index.php, нужно увеличить ширину блока &quot;Welcome...

Как зафиксировать ширину блока?
Как зафиксировать нужную ширину этого блока, сохранив внутренние и внешние отступы, и чтобы блок...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru