Как использовать dyanamic css на сайте

Question

Как использовать dyanamic css на сайте

0

Я хочу использовать динамический css на своем веб-сайте, например, есть 4 разных значка цветов, доступных на верхней части веб-сайта, и если пользователь нажмет на одну из значков целую цветовую схему и значки, то цвета веб-сайта будут изменены.

Это ранее доступно на yahoo.com (в настоящее время оно не доступно или нет).

Также я не хочу использовать сторонний css lib. или инструментов.

Может ли кто-нибудь помочь предложить лучший способ достичь этого.

Abhijeet Dange 13 дек. 2013, в 08:27

Источник

0

У вас может быть сценарий, который говорит, что когда вы нажимаете на один из значков, добавляете класс к телу, например .theme-green , затем .theme-green соответственно. Попробуйте исследовать jQuery addClass а затем addClass некоторый код, если вам addClass .
davidpauljunior 13 дек. 2013, в 06:32
0

есть ли у вас ссылка рабочего примера?
Abhijeet Dange 13 дек. 2013, в 06:35

Теги:

jquery

html

css

3 ответа

Ещё вопросы

У вас может быть сценарий, который говорит, что когда вы нажимаете на один из значков, добавляете класс к телу, например .theme-green , затем .theme-green соответственно. Попробуйте исследовать jQuery addClass а затем addClass некоторый код, если вам addClass .
есть ли у вас ссылка рабочего примера?

Leo · Answer 1 · 2013-12-13T04-34-00.000Z

Определите свои стили в css. Например...

body.white{
   background-color:white;
   color:#333;
}
body.black{
   background-color:black;
   color: white;
}
body.blue{
   background-color:blue;
   color:white;
}

Затем добавьте кнопки изображения, чтобы изменить скин/тему на вашей странице и добавить обработчик кликов, который изменяет скины. здесь пример

Ashish Kumar · Answer 2 · 2013-12-13T08-10-00.000Z

Итак, сначала добавьте класс по умолчанию. как:

<body class="default">

и по щелчку значков просто измените класс тела, как:

<i class="theme-icons" data-class="default"></i>
<i class="theme-icons" data-class="red"></i>
<i class="theme-icons" data-class="blue"></i>
<i class="theme-icons" data-class="green"></i>

$(".theme-icons").click(function(){
    $("body").removeClass("default red blue green").addClass($(this).attr("data-class"));
});

держите свой css вложенным в эти тематические классы. как:

.default .something{
   color:#0F0;
}

.red .something{
   color:red;
}

.blue .something{
   color:blue;
}

.green .something{
   color:green;
}

Удачи!

Catalin Sterian · Answer 3 · 2013-12-13T06-16-00.000Z

functon loadstyle(style){
    $('link#basestyle').attr('href', '/css/'+style+'.css');
}

Пример html-кода: в голове:

<link type=text/css'  rel='stylesheet' id='basestyle' href=/css/style1.css'>

в теле:

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style1')">

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style2')">

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style2')">

похожий вопрос => stackoverflow.com/questions/3913359/…