Форум

bolschoymalchik · #1 (**permalink**) 05.03.2014, 10:51

Здравствуйте. Всем.
Нашел интересный (для меня) скрипт, позволяющий изменять размер шрифта:

var siz = '17px'; function font(){ 
   if(siz == '17px'){
       document.getElementById('a').style.fontSize = '36px';
      siz = '36px';
   } else {
       document.getElementById('a').style.fontSize = '17px';
      siz = '17px'; 
   }
 }

<p id="a" style="font-size:17px;" onclick="font()">какой-то текст</p>

Подскажите пжл., как заставить работать скрипт, если:

<p id="a" >какой-то текст</p>
<p id="b" >какой-то текст</p>
<p id="c" >какой-то текст</p>
...
<p id="n" >какой-то текст</p>

Заранее спасибо.

рони · #2 (**permalink**) 05.03.2014, 10:59

bolschoymalchik,
присвоить класс всем нужным элементам и посмотреть тут

ksa · #3 (**permalink**) 05.03.2014, 11:55

Сообщение от bolschoymalchik

как заставить работать скрипт, если:

<p id="a" >какой-то текст</p>
<p id="b" >какой-то текст</p>
<p id="c" >какой-то текст</p>
...
<p id="n" >какой-то текст</p>

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
p {
	font-size: 17px;
}
</style>
<script type='text/javascript'>
window.onload=function (){
	(function (){
		var o=document.getElementsByTagName('p');
		for (var i=0; i<o.length; i++) {
			o[i].onclick=(function (Obj){
				return function (){
					Obj.style.fontSize=(Obj.style.fontSize == '36px')? '17px': '36px';
				};
			})(o[i]);
		};
	})();
};
</script>
</head>
<body>
<p>Text 0</p>
<p>Text 1</p>
<p>Text 2</p>
</body>
</html>

bolschoymalchik · #4 (**permalink**) 05.03.2014, 13:10

Спасибо за быстрый ответ
Вот что я навыдумывал:

var siz = '17px'; function font(element){
	   if(siz == '17px'){
	       document.getElementById(element).style.fontSize = '36px';
	      siz = '36px';
	   } else {
	       document.getElementById(element).style.fontSize = '17px';
	      siz = '17px';
	   }
	 }

<p id="a" style="font-size:17px;" onclick="font('a')">какой-то текст</p>
	<p id="b" style="font-size:17px;" onclick="font('b')">какой-то текст</p>
	<p id="c" style="font-size:17px;" onclick="font('c')">какой-то текст</p>
	...
	<p id="n" style="font-size:17px;" onclick="font('n')">какой-то текст</p>

как оказалось, проблема в правильно поставленных кавычках)))
Еще раз спасибо Всем откликнувшимся.

ksa · #5 (**permalink**) 05.03.2014, 13:55

Сообщение от bolschoymalchik

Вот что я навыдумывал

Явный перебор...

<script type='text/javascript'>
var siz = '17px'; 
function font(element){
	if(siz == '17px'){
		element.style.fontSize = '36px';
		siz = '36px';
	} else {
		element.style.fontSize = '17px';
		siz = '17px';
	}
}
</script>
<p id="a" style="font-size:17px;" onclick="font(this)">какой-то текст</p>
<p id="b" style="font-size:17px;" onclick="font(this)">какой-то текст</p>
<p id="c" style="font-size:17px;" onclick="font(this)">какой-то текст</p>
...
<p id="n" style="font-size:17px;" onclick="font(this)">какой-то текст</p>

Правда при таком (твоем) подходе не понятно как будет одно значение переменной отслеживать изменения во всех абзацах...

bolschoymalchik · #6 (**permalink**) 05.03.2014, 14:07

bolschoymalchik,

Сообщение от ksa

Явный перебор...

Почему? Вроде все по букварю)))

рони · #7 (**permalink**) 05.03.2014, 14:14

на всякий случай - нормальный вариант
ksa, в 3 посту -- остальные дают непрогнозируемый клик.

ksa · #8 (**permalink**) 05.03.2014, 14:14

Сообщение от bolschoymalchik

Почему?

Сравни мой пример и свой...

Сообщение от bolschoymalchik

Вроде все по букварю

Букварь он кагбэ большой...

Там мнооого разных примеров.

ksa · #9 (**permalink**) 05.03.2014, 14:16

Сообщение от рони

в 3 посту -- остальные дают непрогнозируемый клик

Разумеется.

Я лишь переделал пример от bolschoymalchik дабы он хоть смотрелся по-проще малость...
Да и вопрос про его работопригодность так же был задан.

bolschoymalchik · #10 (**permalink**) 05.03.2014, 14:29

Сообщение от ksa

Сравни мой пример и свой...

Да, Вы правы....

Форум

Справочник

Discord чат

Курсы javascript