Multiple вариант CSS для пользователей

-7

У меня есть эти два CSS-файлы в моей голове раздел:Multiple вариант CSS для пользователей

<link href="css1.css" rel="stylesheet" type="text/css" /> 
<link id="css2" href="css2.css" rel="stylesheet" type="text/css" />

и это HREF:

<a href="#" onclick="document.getElementById('css2').href='css2.css'">Change</a>

страница показывает CSS2 (который имеет цвет фона установлен на зеленый), но я хочу, чтобы он показывал css1 (красный), а затем, щелкнув ссылку css2, он должен измениться на css2.

источник

2013-03-06 Joel

так в чем проблема? – robert

Вы посмотрели на это? http://stackoverflow.com/questions/2011176/changing-a-stylesheet-using-jquery –

Joel, Stack Overflow следует строгому формату Q & A, и трудно точно сказать, в чем ваш вопрос. Можете ли вы прояснить вопрос, пожалуйста? – dgvid

Вы всегда можете добавить еще один внешний файл CSS динамически с помощью JavaScript (или в данном случае JQuery):

$('head').append('<link rel="stylesheet" href="/alternative.css" type="text/css" />');

источник

2013-03-06 16:42:10

Создание таблицы стилей по умолчанию для сайта и создание других стилей для конкретных пользователей. Затем переопределить стили по умолчанию с ними с JavaScripts или PHP

источник

2013-03-06 16:43:35 madhushankarox

Если вы спрашиваете: «Как я могу переключаться между двумя таблицами стилей, когда пользователь щелкает один из ссылок», я бы sugest следующий подход:

Оставьте свою таблицу стилей по умолчанию как есть.
Предисловие все ваши объявления стилей в вашей второй таблицы стилей с некоторым уникальным классом, т.е. alternative-css
Когда пользователь нажимает на «альтернативной» ссылку, добавить класс к элементу высокого уровня (например, <html>, <body> или обертка <div>

Например:

HTML:

<body> 
    <a href="#" id="main">Main Style</a> 
    <a href="#" id="alt">Alternative Style</a> 
    <div id="wrapper"> 
     <p>Some text</p> 
    </div> 
</body>

стилевых:

#wrapper { 
    background: #000; 
} 
p { 
    color: #fff; 
}

Альтернатива Stylesheet:

.alternative-css #wrapper { 
    background: #fff; 
} 
.alternative-css p { 
    color: #000; 
}

JS:

$('#main').click(function(){$('body').removeClass('alternative-css')}); 
$('#alt').click(function(){$('body').addClass('alternative-css')});

PS: Я знаю, что ты не помечать этот вопрос с JQuery ... но это означает более как понятие, и не должно быть слишком сложно писать обработчики кликов в vanilla JS.

источник

2013-03-06 16:47:06 Steve

Самый простой способ сделать это, который я нашел, - установить класс в теге <body> и использовать один файл CSS, но определить два набора определений CSS, префикс каждого набора с именем класса.

Установите класс по умолчанию (например, <body class="bodyClass1">), а затем, если вы хотите изменить внешний вид, вы просто обновляете класс до другого класса с помощью JavaScript.

Преимущества этого в том, что все классы загружаются при загрузке страницы, и любые общие стили могут быть закодированы вне определений класса.

Пример:

body {...} 
a {...} 
div {font-weight: bold;} 

.bodyClass1 div {font-size: 10px;} 

.bodyClass2 div {font-size: 12px;}

источник

2013-03-06 16:52:48 talemyn

Это не работает, потому что у вас есть оба файла загружаются при загрузке страницы. Так что, конечно, это будет цвет второго файла с самого начала, так как оба файла есть.

Страница должна начинаться с одного файла.

Другой вариант - вы загружаете оба файла, но правила основаны на классе на теле.

file1.css

body { background-color: yellow; } 
h1 { color: red }

file2.css

body.alt {background-color: green; } 
body.alt h1 { color : blue; }

И с JavaScript вы добавляете класс.

document.body.className = document.body.className==="alt" ? "" : "alt";

источник

2013-03-06 18:38:00 epascarello

Вы можете просто неработающего/включить вторую таблицу стилей через disabled property:

document.getElementById('css2').sheet.disabled = true;

или весь <link> элемент:

document.getElementById('css2').disabled = true;

Таким образом, заявления не будут перезаписаны те из первый. Ваша попытка сменить ссылку href будет работать, но для этого вам понадобится только один<link> тег, который переключается между "css1.css" и "css2.css".

источник

2013-03-06 18:40:37 Bergi

Multiple вариант CSS для пользователей

ответ

Смежные вопросы