Изменение размера шрифта
Здравствуйте. Всем.
Нашел интересный (для меня) скрипт, позволяющий изменять размер шрифта: 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> Заранее спасибо. |
bolschoymalchik,
присвоить класс всем нужным элементам и посмотреть тут |
Цитата:
<!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> |
Спасибо за быстрый ответ
Вот что я навыдумывал: 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> как оказалось, проблема в правильно поставленных кавычках))) Еще раз спасибо Всем откликнувшимся. |
Цитата:
<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,
Цитата:
|
на всякий случай - нормальный вариант
ksa, в 3 посту -- остальные дают непрогнозируемый клик. |
Цитата:
Цитата:
|
Цитата:
Я лишь переделал пример от bolschoymalchik дабы он хоть смотрелся по-проще малость... Да и вопрос про его работопригодность так же был задан. |
Цитата:
|
По-моему тут в сто раз проще классы переключать. Но если хочется стили, то примерно так (ниче не проверял):
function ToggleFonts(tag_name){ var toggle_fs=function() { if(this.dataset.org_font) { this.style.fontSize=this.dataset.org_font.'px'; this.dataset.org_font=null; } else { var fs = window.getComputedStyle(this, null).getPropertyValue('font-size'); this.dataset.org_font = parseFloat(fs); this.style.fontSize='36px'; } }; var p=document.getElementsByTagName(tag_name); for (var i=0; i<p.length; i++) p[i].addEventListener('click', toggle_fs, false); } |
Цитата:
у вас условие в 4 строке нерабочее 5 строка ошибка 8 нафиг ненужна у вас зуд отметится в каждой теме? <!DOCTYPE html> <html> <head> <style type='text/css'> p { font-size: 17px; } </style> <script> window.onload=function (){ (function (tag_name){ var toggle_fs=function() { if(this.dataset.org_font) { this.style.fontSize='17px'; this.dataset.org_font= ''; } else { this.dataset.org_font = this.style.fontSize='36px'; } }; var p=document.getElementsByTagName(tag_name); for (var i=0; i<p.length; i++) p[i].addEventListener('click', toggle_fs, false); } )('p'); }; </script> </head> <body> <p>Text 0</p> <p>Text 1</p> <p>Text 2</p> </body> </html> |
Часовой пояс GMT +3, время: 09:25. |