JavaScript и CSS
Подскажите, как можно при помощи JavaScript обратиться к классам CSS и переопределить их параметры? Суть такая: страница при загрузке определяет разрешение монитора и подстраивает размеры элементов под конкретное разрешение.
|
demoniqus,
В интернете по этой теме довольно много информации. Вот, например, с шаманского форума: http://xpoint.ru/know-how/JavaScript/TablitsyiStiley?2 А еще можно подгружать разные, уже "готовые" CSS файлы, в зависимости от определённого разрешения экрана, просто добавляя соответствующий link элемент в DOM. |
мысль про подключение интересная, но получилось так, что на php все реализовано таким образом, что страница подстраивается под любое разрешение - хоть 1280*1024, хоть 1281*1023. Единственная проблема в том, что в php-файл надо передавать разрешение. А при первом запуске сайта (например при переходе с другого сайта) этого не произойдет. Из-за этого сайт может отобразиться не слишком коректно. Поэтому хотелось переделать его на javascript. А создать CSS на каждое разрешение - нереально. Надо исправлять параметры динамически.
|
demoniqus, а если пользователь в процессе просмотра сайта решит изменить размеры окна?
Вот к примеру из поиска приходят почти всегда с открытием нового окна, при этом IE, как правило, не распахивает его, т.е. у вас загрузится версия для маленького окна, пользователь распахнет его и что он увидит? |
demoniqus, камрад Kolyaj прав.
Такие вещи решаются с помощью CSS и только CSS. |
Привязка идет не к размерам окна, а к разрешению монитора. Просто тестируя сайт, я обратил внимание, что то, что нормально выглядет при разрешении 1024, нереально разглядеть на разрешении 1280 и наоборот: то, что нормально для 1280, на разрешении 1024 может не по-детски напугать размерами. Впринципе наиболее частые разрешения 1024 и 1280. 800 уже совершенно неактуально, а прочие разрешения встречаются довольно редко. Поэтому можно было бы использовать две таблицы стилей, но все-таки хочется сохранить возможность сайта подстраиваться под конкретные параметры монитора. Прописывать во все необходимые элементы id-ишники, а потом для каждого из них писать javascript-код черезчур накладно. Через имя тега (a, div, font и т.п.) обратиться не получится. А PHP довольно существенно притормаживает. И второй недостаток PHP - в первый раз разрешение как параметр не передается - поэтому пришлось задать 1024. Поэтому ищу возможность через javascript обратиться именно к классу CSS и переопределить его параметры.
|
demoniqus, а может лучше все-таки сверстать нормально?
Ну вот, например, как вариант http://habrahabr.ru/blog/css/37042.html |
Кое-что интересное для себя в статье нашел - спасибо!)))
Про 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, который будет быстрее работать, не нагружать лишний раз сервер и никаких проблем с передачей параметров. Может у кого-нибудь есть идеи по этому поводу? |
demoniqus, слушайте, вы никогда не слышали термин "резиновая верстка"? И никогда не были на сайтах, которые выглядят нормально, даже если поменять размер окна браузера?
Вам нужно всего лишь нормально сверстать на CSS, а не приделывать пятое колесо на PHP или JS. вот тут можно основную раскладку определить, в одну, две или три колонки. |
Мечталось бы сотворить такое дело: на страничке выбирается стиль таблички и табличка рисуется в выбранном стиле. Можно изменить с помощью явы свойство напрмер цвета в правилах цсс. Но как вытащить титл, название, имя cssRule? :(
|
зачем менять css через javascript? Лучше менять класс таблицы (class), и, основываясь на этих классах создать один css для всех стилей таблицы
p.s. ява - не javascript |
Подскажите пожалуйста. Вроде все так просто, но не получаеца...)
есть три блока <div>. один слева со свойством float:left, два правее него, один под другим. Суммарный height обоих блоков, что справа равен height'у левого блока(ну т.е. теоретически и идеалистически :) ). Все стили этих блоков прописаны в прикрепленном файле '.css'. я хочу в яваскрипте узнавать текущий height левого блока и изменять в соответсвии с ним height нижнего правого блока(верхний правый статический). Делаю так: var left = document.getElementById("left").style.height; var rightUp = document.getElementById("rightUp").style.height; document.getElementById("rightDown").style.height = (left-rightUp)+'px'; Понятно, что height'ы left и rightUp - это строки и мне придется превращать его в number, просто проблема в том, что у меня элементарно не получается заставить работать код: var left = document.getElementById("left").style.height; alert(left); Т.е. выскакивает просто пустое окошко оповещения... :( Но если писать: document.getElementById("left").style.height = '10px'; var left = document.getElementById("left").style.height; alert(left); То все работает и на экран выводится окошко с текстом '10px'. |
а зачем ты хочешь высоту вырвнять, у тебя в левом блоке содержимое меняется?
|
Да. В левом блоке основной контент страницы. Правый какбы красивая рамка, состоящая из верхнего элемента и основного нижнего.
|
Всем спасибо за ответы)))
Я разобраси таки. Как я и ожидал, все было очень просто и совсем на поверхности. чтоп изменить height использовать: document.getElementByID('').style.height, а чтобы выводить значения height использовать: document.getElementByID('').clientHeight или document.getElementByID('').offsetHeight подробнее здесь: http://programming.top54u.com/Sample...h/Default.aspx |
|
У меня слегка отличная проблема но не сильно. Мне нужно менять картинки которые заданы в цсс, то есть мне нужен конкретный пример команд гет и сет которыми это можно сделать именно с картинками
|
Ребята помогите лузеру... надо сделать по jave констректор лего,разных цветов,ну как стенка чтоб получилась, я не представляю даже какую программу открывать:cray:
|
ой КОНСТРУКТОР лего
|
Цитата:
|
а про меня то чё забыли?
У меня слегка отличная проблема но не сильно. Мне нужно менять картинки которые заданы в цсс, то есть мне нужен конкретный пример команд гет и сет которыми это можно сделать именно с картинками |
starostin13,
document.getElementById('id элемента').style.background = "url('img.gif')";
это чтоли ? |
Не совсем, у меня н бекграунд, а срц. Попробывал вот так document.getElementById("classID").src="url(Image/gun.jpg)";
но всё рравно не помогает Да и вабще чё то эта конструкция ничего не возвращает, ни какого свойства |
в src просто адрес, без url(…)
|
Спасибо за подсказку, но document.getElementById("classID").src всё равно ничего не возвращает.
|
Покажите, как вы используете этот код на странице.
|
ой блин я дурак, хорошо что хоть щас обратили на это моё внимание, в действительности я использую не src как говорил а background, прошу меня простить, но тем не менее, проблема остаёться
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="chesses.css" />
<script src="script.js" />
</head>
<body>
<img alt="" style="width: 56px; height: 56px; visibility:visible; position:absolute;z-index:2;" id="cage11" onclick="Count(id)" />
</body>
</html>
css:
#cage11
{
position:absolute;
top:57px;
left:57px;
background:url(Image/gun.jpg);
}
JS:
function Count(ID)
{
var classID = '#'+ID;
var elem = document.getElementById('classID').style.background;// = "url('Image/gun.jpg')"
alert(elem);
}
|
var elem = document.getElementById(*!*classID*/!*).src = "gun.jpg"; а вообще лучше так: <img … onclick="func(this)" />
function func(element) {
element.src = "…";
}
|
function Count(elem)
{ var element = '#' + elem; alert(element); } выдаёт элемент, а вот function Count(elem) { var element = '#' + elem; alert(element.src); } уже не выдаёт свойвств, тока undefined |
Ах да, еще решетка в имени идентификатора не нужна.
Цитата:
|
дык потому что у меня в цсснике так классы названы
И вабще разницы никакой, что с решёткой, что без, при function Count(elem) { alert(elem.top); } всё равно undefined, а function Count(elem) { alert(elem.style.top); } вабще не работает |
подскажите почему в
var current = document.getElementById(elem).style.background; current равен 0, не null, не "", а именно 0 и почему так, поидее должно быть чё то типа "url(Image/gun.jpg)" |
var current = document.getElementById(elem).style.backgroundImage; |
к сожалению не помагает, пробывал
|
Нашёл где всё понятно
https://developer.mozilla.org/en/DOM...tComputedStyle |
Цитата:
не забудь, что для некоторых браузеров нужен currentStyle |
Автоматически возник новый вопрос, как получить не полный адрес или как его обрезать?
|
neurostep, знаю что надо, просто передо мной пока не стоит задача кроссплотформенности, и слава богу, а то я и так затянул :)
|
Пока на ум приходят только регулярные выражения
|
Цитата:
|
| Часовой пояс GMT +3, время: 07:47. |