28.05.2008, 12:54
|
Профессор
|
|
Регистрация: 28.05.2008
Сообщений: 182
|
|
JavaScript и CSS
Подскажите, как можно при помощи JavaScript обратиться к классам CSS и переопределить их параметры? Суть такая: страница при загрузке определяет разрешение монитора и подстраивает размеры элементов под конкретное разрешение.
|
|
28.05.2008, 13:06
|
|
|
Регистрация: 21.02.2008
Сообщений: 1,250
|
|
demoniqus,
В интернете по этой теме довольно много информации. Вот, например, с шаманского форума:
http://xpoint.ru/know-how/JavaScript/TablitsyiStiley?2
А еще можно подгружать разные, уже "готовые" CSS файлы, в зависимости от определённого разрешения экрана, просто добавляя соответствующий link элемент в DOM.
|
|
29.05.2008, 10:48
|
Профессор
|
|
Регистрация: 28.05.2008
Сообщений: 182
|
|
мысль про подключение интересная, но получилось так, что на php все реализовано таким образом, что страница подстраивается под любое разрешение - хоть 1280*1024, хоть 1281*1023. Единственная проблема в том, что в php-файл надо передавать разрешение. А при первом запуске сайта (например при переходе с другого сайта) этого не произойдет. Из-за этого сайт может отобразиться не слишком коректно. Поэтому хотелось переделать его на javascript. А создать CSS на каждое разрешение - нереально. Надо исправлять параметры динамически.
|
|
29.05.2008, 11:26
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
demoniqus, а если пользователь в процессе просмотра сайта решит изменить размеры окна?
Вот к примеру из поиска приходят почти всегда с открытием нового окна, при этом IE, как правило, не распахивает его, т.е. у вас загрузится версия для маленького окна, пользователь распахнет его и что он увидит?
|
|
29.05.2008, 15:11
|
Профессор
|
|
Регистрация: 18.04.2008
Сообщений: 152
|
|
demoniqus, камрад Kolyaj прав.
Такие вещи решаются с помощью CSS и только CSS.
|
|
03.06.2008, 15:47
|
Профессор
|
|
Регистрация: 28.05.2008
Сообщений: 182
|
|
Привязка идет не к размерам окна, а к разрешению монитора. Просто тестируя сайт, я обратил внимание, что то, что нормально выглядет при разрешении 1024, нереально разглядеть на разрешении 1280 и наоборот: то, что нормально для 1280, на разрешении 1024 может не по-детски напугать размерами. Впринципе наиболее частые разрешения 1024 и 1280. 800 уже совершенно неактуально, а прочие разрешения встречаются довольно редко. Поэтому можно было бы использовать две таблицы стилей, но все-таки хочется сохранить возможность сайта подстраиваться под конкретные параметры монитора. Прописывать во все необходимые элементы id-ишники, а потом для каждого из них писать javascript-код черезчур накладно. Через имя тега (a, div, font и т.п.) обратиться не получится. А PHP довольно существенно притормаживает. И второй недостаток PHP - в первый раз разрешение как параметр не передается - поэтому пришлось задать 1024. Поэтому ищу возможность через javascript обратиться именно к классу CSS и переопределить его параметры.
|
|
03.06.2008, 15:52
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
demoniqus, а может лучше все-таки сверстать нормально?
Ну вот, например, как вариант http://habrahabr.ru/blog/css/37042.html
|
|
04.06.2008, 10:52
|
Профессор
|
|
Регистрация: 28.05.2008
Сообщений: 182
|
|
Кое-что интересное для себя в статье нашел - спасибо!)))
Про em-ную верстку знаю. Собственно у меня весь текст, ссылки и прочее в em-ах и стоит. Однако далеко не все знают, что можно покрутить колесико мышки+Ctrl или зайти в Вид-Размер шрифта, если сайт не слишком корректно отображается - и все достоинства такого метода идут на смарку. Если на странице написано, что текст имеет размер 5em, то при любом разрешении монитора он и будет 5em. Только при 1600*1280 он будет уместен, а при 1024*768 буквы будут больше монитора...
Приведу часть кода:
< ?php if (!isset($factor)) {$factor=1024;} $factor=round($factor/1600*80); ?>
//в переменную $factor изначально передается разрешение монитора.
//Если происходит вызов страницы без параметров, то присваивается
//значение 1024. Далее переменная $factor превращается в коэффициент
//для вычисления размеров объектов на странице. Значения 1600 и 80
//дали приятный результат и просто не стал их трогать более.
.........
< STYLE type="text/css">
a.Amenu{...;font-size: < ?php $factor1= $factor*2/100; echo $factor1; ?>em;....}
a.contacts{.......}
.............
<body.....
....
<div style="font-size: < ?php $factor1= $factor*3/100; echo $factor1; ?>em;....">
.....
Конструкция font-size: < ?php $factor1= $factor*2/100; echo $factor1; ?> встречается во многих местах и вероятно значительно притормаживает выполнение страницы. Кроме того, как я и сказал, страница может быть запущена без параметров. Поэтому я пытаюсь ее заменить на JavaScript, который будет быстрее работать, не нагружать лишний раз сервер и никаких проблем с передачей параметров. Может у кого-нибудь есть идеи по этому поводу?
|
|
04.06.2008, 12:40
|
Профессор
|
|
Регистрация: 18.04.2008
Сообщений: 152
|
|
demoniqus, слушайте, вы никогда не слышали термин " резиновая верстка"? И никогда не были на сайтах, которые выглядят нормально, даже если поменять размер окна браузера?
Вам нужно всего лишь нормально сверстать на CSS, а не приделывать пятое колесо на PHP или JS.
вот тут можно основную раскладку определить, в одну, две или три колонки.
|
|
22.04.2009, 20:17
|
|
Мечталось бы сотворить такое дело: на страничке выбирается стиль таблички и табличка рисуется в выбранном стиле. Можно изменить с помощью явы свойство напрмер цвета в правилах цсс. Но как вытащить титл, название, имя cssRule?
|
|
|
|