Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   JavaScript и CSS (https://javascript.ru/forum/dom-window/1261-javascript-i-css.html)

demoniqus 28.05.2008 12:54

JavaScript и CSS
 
Подскажите, как можно при помощи JavaScript обратиться к классам CSS и переопределить их параметры? Суть такая: страница при загрузке определяет разрешение монитора и подстраивает размеры элементов под конкретное разрешение.

Андрей Параничев 28.05.2008 13:06

demoniqus,
В интернете по этой теме довольно много информации. Вот, например, с шаманского форума:
http://xpoint.ru/know-how/JavaScript/TablitsyiStiley?2

А еще можно подгружать разные, уже "готовые" CSS файлы, в зависимости от определённого разрешения экрана, просто добавляя соответствующий link элемент в DOM.

demoniqus 29.05.2008 10:48

мысль про подключение интересная, но получилось так, что на php все реализовано таким образом, что страница подстраивается под любое разрешение - хоть 1280*1024, хоть 1281*1023. Единственная проблема в том, что в php-файл надо передавать разрешение. А при первом запуске сайта (например при переходе с другого сайта) этого не произойдет. Из-за этого сайт может отобразиться не слишком коректно. Поэтому хотелось переделать его на javascript. А создать CSS на каждое разрешение - нереально. Надо исправлять параметры динамически.

Kolyaj 29.05.2008 11:26

demoniqus, а если пользователь в процессе просмотра сайта решит изменить размеры окна?

Вот к примеру из поиска приходят почти всегда с открытием нового окна, при этом IE, как правило, не распахивает его, т.е. у вас загрузится версия для маленького окна, пользователь распахнет его и что он увидит?

hogart 29.05.2008 15:11

demoniqus, камрад Kolyaj прав.
Такие вещи решаются с помощью CSS и только CSS.

demoniqus 03.06.2008 15:47

Привязка идет не к размерам окна, а к разрешению монитора. Просто тестируя сайт, я обратил внимание, что то, что нормально выглядет при разрешении 1024, нереально разглядеть на разрешении 1280 и наоборот: то, что нормально для 1280, на разрешении 1024 может не по-детски напугать размерами. Впринципе наиболее частые разрешения 1024 и 1280. 800 уже совершенно неактуально, а прочие разрешения встречаются довольно редко. Поэтому можно было бы использовать две таблицы стилей, но все-таки хочется сохранить возможность сайта подстраиваться под конкретные параметры монитора. Прописывать во все необходимые элементы id-ишники, а потом для каждого из них писать javascript-код черезчур накладно. Через имя тега (a, div, font и т.п.) обратиться не получится. А PHP довольно существенно притормаживает. И второй недостаток PHP - в первый раз разрешение как параметр не передается - поэтому пришлось задать 1024. Поэтому ищу возможность через javascript обратиться именно к классу CSS и переопределить его параметры.

Kolyaj 03.06.2008 15:52

demoniqus, а может лучше все-таки сверстать нормально?
Ну вот, например, как вариант http://habrahabr.ru/blog/css/37042.html

demoniqus 04.06.2008 10:52

Кое-что интересное для себя в статье нашел - спасибо!)))
Про 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, который будет быстрее работать, не нагружать лишний раз сервер и никаких проблем с передачей параметров. Может у кого-нибудь есть идеи по этому поводу?

hogart 04.06.2008 12:40

demoniqus, слушайте, вы никогда не слышали термин "резиновая верстка"? И никогда не были на сайтах, которые выглядят нормально, даже если поменять размер окна браузера?

Вам нужно всего лишь нормально сверстать на CSS, а не приделывать пятое колесо на PHP или JS.
вот тут можно основную раскладку определить, в одну, две или три колонки.

Юлия Андреевна 22.04.2009 20:17

Мечталось бы сотворить такое дело: на страничке выбирается стиль таблички и табличка рисуется в выбранном стиле. Можно изменить с помощью явы свойство напрмер цвета в правилах цсс. Но как вытащить титл, название, имя cssRule? :(


Часовой пояс GMT +3, время: 14:54.