Говорила мне мама: "Учи JavaScript"

[Константин Абрамов]

А я не слушался! Проблемка, собственно, небольшая. Из Web-дизайна пока знаю только HTML и CSS. А нужно сделать так, чтобы у пользователя с разрешением экрана 1024*768 при открытии сайта выполнялся скрипт, заменяющий одно значение свойства в прикреплённой CSS на другое. Как это делается? Подскажите, пожалуйста.

[support@ayola.net]

Как хорошо что вы знаете CSS. Это именно в CSS и делается

[support@ayola.net]

p.s. ну или document.getElementById("IDобъекта").style.чтовыхотитепоменять = "изменение".

[-Deadly-]

<script language="javascript">
    //ЭТОТ КОД НЕОБХОДИМО ВСТАВИТЬ В КОД
    //ГЛАВНОЙ СТРАНИЦЫ САЙТА
    //Инициализируем переменные высоты и ширины
    var height=0;
    var width=0;
    //Определяем реальные значения высоты и ширины
    if (self.screen)
        {
        width = screen.width
        height = screen.height
        }
    //Анализируем найденные параметры и отсылаем
    //пользователя на страницу с нужным разрешением
    if (width == 1024 && height == 768)
        { location.href = "path_to_file_1024x768" }
    else if (width == 800 && height == 600)
        { location.href = "path_to_file_800x600" }
    else if (width == 640 && height == 480)
        { location.href = "path_to_file_640x480" }
    else
        { location.href = "path_to_default_file" }
</script>
Значения  location.href = "path_to_file_640x480 соответственно можно подменить не на переадресацию, а на изменения css

[Константин Абрамов]

p.s. ну или document.getElementById("IDобъекта").style.чтовыхотитепоменять = "изменение".

Нет, позвольте, а как можно с помощью CSS проверить разрешение экрана? Это что-то новенькое. То, что вы указали, как я понимаю, занимается изменением атрибута style, а можно ли сделать непосредственное изменение свойства в прикреплённой таблиц стилей, а не в самом html-файле?

[-Deadly-]

Нет нельзя

Вообще чем вам не нравиться наше решение

Берем этот код и вставляем в начало страницы

<script language="javascript">
    var height=0;
    var width=0;
    if (self.screen)
        {
        width = screen.width
        height = screen.height
        }
    if (width == 1024 && height == 768)
        { }
    else if (width == 800 && height == 600)
        { document.getElementById("style).innerHTML="<link rel='stylesheet' href='style1.css' type='text/css'>" }
    else if (width == 640 && height == 480)
        { document.getElementById("style).innerHTML="<link rel='stylesheet' href='style2.css' type='text/css'>" }
    else
        { document.getElementById("style).innerHTML="<link rel='stylesheet' href='style3.css' type='text/css'>" }
</script>

потом в хеад вставляем
<span id="style"></span>

Должно рабатать.

[-Deadly-]

Хотя можно срегинерировать css файл через php, но это изврат.

[Константин Абрамов]

А как же объект styleSheet? Он, вроде, к таблице стилей обращается непосредственно...

[-Deadly-]

А как же объект styleSheet? Он, вроде, к таблице стилей обращается непосредственно...

Если срегинирирова css через php он будет находиться в head в <style type="text/css"></style>
зачем там styleSheet?

[Константин Абрамов]

Если срегинирирова css через php он будет находиться в head в <style type="text/css"></style>
зачем там styleSheet?

Я вам не о php-скрипте говорю, ибо вы сами сказали, что это извращение, а о реализации с помощью JavaScript.

[-Deadly-]

Я чего то не пойму что вам надо, заменять css файл при разных разрешения экрана или только несколько свойств?

[Константин Абрамов]

Опишу ситуацию более подробно. Есть один html-файл, есть прикреплённая к нему таблица стилей. HTML-код подогнан под все распространённые разрешения экрана за исключением 1024*768. Чтобы и на этом разрешении он отображался корректно, необходимо поменять значения двух свойств, которые записаны в прикреплённой таблице стилей. А именно, вместо margin-top: 70px и padding-bottom: 85px сделать margin-top: 0px и padding-bottom: 0px. Вот и всё!

[-Deadly-]

<script language="javascript">
    var height=0;
    var width=0;
    if (self.screen)
        {
        width = screen.width
        height = screen.height
        }
    if (width == 1024 && height == 768)
        { document.getElementById("mar").style.marginTop = '0px';
           document.getElementById("pad").style.paddingBottom = '0px';
        }
</script>
В нужные элементы вставляем id="mar, pad"

[Константин Абрамов]

Спасибо большое! Немного позже обязательно попробую! А возможно сделать тоже самое, но с использованием class, а не id?

[-Deadly-]

можно таким методом document.write="<link rel='stylesheet' href='style1.css' type='text/css'>"
добавить дополнительный css и тогда можно использовать class

[Константин Абрамов]

Тоже вариант. Спасибо большое за подсказки!

[Константин Абрамов]

Эх, ещё один вопросик возник. А что означает чудесное словосочетание self.screen применительно к JavaScript?

[support@ayola.net]

ничего. синоним window. достаточно просто screen написать.

[-Deadly-]

можно вообще этот if снести, это так для надежности

[Константин Абрамов]

можно вообще этот if снести, это так для надежности

Что я и сделал.

[Константин Абрамов]

К слову сказать, ни один из выше предложенных способов мне не помог. Мой пытливый мозг стал мучать поисковики и наткнулся на интересную и умную статейку, которая, кстати, в решении проблемы и помогла. Может кому и пригодится - http://xpoint.ru/know-how/JavaScript/TablitsyiStiley?2