Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Замена CSS.

Автор: Elfet 15.2.2009, 11:32

Всем привет!
Такая задача: у меня есть два файла: style_red.css и style_blue.css.
На страницу подключен первый файл: style_red.css
Нажав на иконку смены стиля, должен начать использоваться второй файл: style_blue.css
Как это сделать?

Заранее спасибо! smile

Автор: bars80080 15.2.2009, 12:31

перезагрузить страницу, в которой
<link href="<?php echo $currentStyles; ?>" />
$currentStyles - меняется в зависимости от выбора

Автор: Elfet 15.2.2009, 15:23

bars80080, это понятно. А я хочу без перезагрузки страницы - возможно ли?

Автор: bars80080 15.2.2009, 23:39

ну попробуй на линк посадить id и поменять у него href. но имхо, не получится. а главное зачем? неужели требуется так часто менять цветовую комбинацию?

Автор: Samotnik 16.2.2009, 01:38

http://alistapart.com/articles/alternate/ или http://www.alistapart.com/articles/phpswitch/ должно помочь.

Автор: Elfet 16.2.2009, 10:28

Samotnik, ок, спасибо!

Автор: Soah 19.2.2009, 22:27

style_red.css

Код


.txt {background-color: red;}

style_blue.css

Код


.txt {background-color: blue;}

Код


<head>
  <link rel="stylesheet" type="text/css" id="myStyle" href="css/style_red.css" />
</head>
<body>

<div class="txt">Text</div>

<script type="text/javascript">
    function changeCSS(name) 
    {
        document.getElementById("myStyle").href = "css/" + name + ".css";
    }
</script>

<input type="button" value="Blue" onclick="changeCSS('style_blue')" />
</body>

Автор: Elfet 20.2.2009, 20:18

Soah, будет работать? Стили друг друга не перекрывают?

Автор: Soah 20.2.2009, 20:51

Да вроде всё работает.

style_red.css

Код


.txt { color: red; }

div { color : orange; }

style_blue.css

Код


.txt { color: blue; }

Код


<head>
  <link rel="stylesheet" type="text/css" id="myStyle" href="css/style_red.css" />
</head>
<body>

<div class="txt">Text</div>
<div>Abracadabra</div>

<script type="text/javascript">
    function changeCSS(name) 
    {
        document.getElementById("myStyle").href = "css/" + name + ".css";
    }
</script>

<input type="button" value="Blue" onclick="changeCSS('style_blue')" />
<input type="button" value="Red" onclick="changeCSS('style_red')" />
</body>

Автор: Elfet 20.2.2009, 21:36

Soah, спасибо!

Автор: bars80080 20.2.2009, 21:45

мда, в очередной раз стоит принять к сведению, что вопрошающие в основном ищут готовые решения, а не совет

Автор: Elfet 20.2.2009, 22:18

bars80080, какой тут может быть совет? smile

Автор: awers 20.2.2009, 22:32

bars80080, тут какраз пхп был не к месту )

А стили можно ещё менять с помощью изменения атрибута disabled

Автор: bars80080 21.2.2009, 12:07

Elfet, awers, попробуйте найти разницу в решение Soah и

Цитата(bars80080 @ 15.2.2009, 22:39

)

попробуй на линк посадить id и поменять у него href

но меня больше убил вопрос:

Цитата(Elfet @ 20.2.2009, 19:18

)

Soah, будет работать? Стили друг друга не перекрывают?

т.е. товарищ изначально не планирует заниматься тестированием, а оставляет это на откуп советчикам

Автор: awers 21.2.2009, 12:48

bars80080, ну не всем интересно тестировать. К сожелению