JS смена style.css!
Хочу я переделать скрипт смены фона на скрипт смены style.css!
Вот есть много примеров смены фона но все они используют функцию document.bgColor А в яваскрипт я новичок, поэтому не получается переделать! Если не будет сложно, сделайте что бы это все дело юзеру в куки добавлялось! Может кто поможет?? |
Ладно подскажите тогда как вот этот скрипт смены фона можно переделать под смену стиля???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bg</title>
<style type="text/css">
*{ margin: 0; padding:0}
html, body { background: #999; height: 100%; }
div { padding: 5px 5px 30px; background: #fff; width: 100px;}
img { display: block; margin-top: 20px; border: 1px solid #000; padding: 3px;}
</style>
</head>
<body>
<input type="submit" value="Нажать" onclick="bg(2)" /><br />
<div>
<img src="img1.png" onclick="bg(1)" />
<img src="img2.png" onclick="bg(2)" />
<img src="img3.png" onclick="bg(3)" />
</div>
<script>
function bg(param){
var bodyNode = document.getElementsByTagName('body').item(0)
bodyNode.style.background = 'url(img'+param+'.png)'
}
</script>
</body>
</html>
|
Может это поможет? Просто в функцию поместить нужный стиль
document.write([
'<style type="text/css">',
' .content a:link {',
' visibility:hidden;',
' }',
...
'</style>'].join('\n'));
|
Чет не выходит((
|
Ааауууу......................
|
...
<head>
<link id="dyncss" rel="stylesheet" type="text/css" href="" />
<script type="text/javascript">
function setDynCSS(url) {
if (!arguments.length) {
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];
if (!url) return '';
}
document.getElementById('dyncss').href = url;
var d = new Date();
d.setFullYear(d.getFullYear() + 1);
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');
return url;
}
setDynCSS();
</script>
</head>
<body>
<input onchange="setDynCSS(this.value);" />
...
P.S. В функцию передавать url css-а. |
vk65535, Большое тибе спасибо!
Если получитсо + дам, а если можно больше, то дам сколько можно будет!) |
vk65535,
Подожди, я правильно все сделал? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link id="dyncss" rel="stylesheet" type="text/css" href=">
<script type="text/javascript">
function setDynCSS(url) {
if (!arguments.length) {
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];
if (!url) return '';
}
document.getElementById('dyncss').href = url;
var d = new Date();
d.setFullYear(d.getFullYear() + 1);
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');
return url;
}
setDynCSS();
</script>
</head>
<body>
<input onchange="setDynCSS(this.value);" />
<input type="submit" value="Нажать" onclick="bg(2)" /><br />
<div>
<img src="img1.png" onclick="bg(1)" />
<img src="img2.png" onclick="bg(2)" />
<img src="img3.png" onclick="bg(3)" />
</div>
<script>
function bg(param){
var bodyNode = document.getElementsByTagName('body').item(0)
bodyNode.style.background = 'url(img'+param+'.png)'
}
</script>
</body>
</html>
|
vk65535,
Смотри у меня есть три css'а один из них используется в даный момент! Мне просто вписать полный путь к любому стилю, а потом что делать? |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link id="dyncss" rel="stylesheet" type="text/css" href="">
<script type="text/javascript">
function setDynCSS(url) {
if (!arguments.length) {
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];
if (!url) return '';
}
document.getElementById('dyncss').href = url;
var d = new Date();
d.setFullYear(d.getFullYear() + 1);
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');
return url;
}
setDynCSS();
</script>
</head>
<body>
<div>
<img src="img1.png" onclick="setDynCSS('/pathto/css1.css')" />
<img src="img2.png" onclick="setDynCSS('/pathto/css2.css')" />
<img src="img3.png" onclick="setDynCSS('/pathto/css3.css')" />
</div>
</body>
</html>
|
Большое спасибо!))
Вот хотел перейти на селекты, но увы!( <select>
<option onclick="setDynCSS('temp/opera/style.css')">Opera</option>
<option onclick="setDynCSS('temp/default/style.css')">Default</option>
<option onclick="setDynCSS('temp/green/style.css')">Green</option>
</select>
Селекты сделал а кнопку незнаю как сделать!( |
Не совсем понял, о какой кнопке речь.
|
Ну смотри я селектом выбираю опцию(стиль), и когда я выбрал мне надо нажать кнопку которая присвоит выбраную опцию(стиль)!
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link id="dynCSS" rel="stylesheet" type="text/css" href="">
<script type="text/javascript">
DynCSS = {
css: [
{ title: 'CSS1', url: '/pathto/css1.css' },
{ title: 'CSS2', url: '/pathto/css2.css' },
{ title: 'CSS3', url: '/pathto/css3.css' }
],
id2e: function(id) { return document.getElementById(id); },
init: function() {
this.renderOptions();
var icss = (icss = String(document.cookie).match(/\bdyncss=([^;]*)/)) && icss[1];
this.setCSS(icss);
},
setCSS: function(icss) {
var s = this.id2e('dynCSSSelect');
if (!arguments.length) icss = s.value;
else s.value = this.css[icss = parseInt(icss) || 0] ? icss : 0;
var css = this.css[icss];
this.id2e('dynCSS').href = css.url;
var d = new Date();
d.setFullYear(d.getFullYear() + 1);
document.cookie = ['dyncss=', icss, ';expires=', d.toGMTString(), ';path=/;'].join('');
return this;
},
renderOptions: function() {
for (var i = 0, s = this.id2e('dynCSSSelect'); i < this.css.length; ++i)
s.options.add(new Option(this.css[i].title, i));
}
};
</script>
</head>
<body>
<select id="dynCSSSelect"></select>
<button type="button" onclick="DynCSS.setCSS()">go</button>
<script type="text/javascript">DynCSS.init();</script>
</body>
</html>
|
В IE работает, а вот в Опере и Мозилле нет!((
|
Хмм, у меня везде работает. Проверьте url-ы css-ов.
|
Где надо библиотеку ставить между тегами шапки?
|
Какую библиотеку?
Может вам будет проще выложить сюда ваш исходник? |
Все проблема решена!))
Просто IE не чуствителен к Регистру а вот Opera и Mozilla даже очень!) <link id="[COLOR="Red"][U][B]dyncss[/B][/U][/COLOR]" rel="stylesheet" type="text/css" href="temp/default/style.css"> Жирное подчеркнутое слово в исходнике, было вот таким! А надо было dynCSS! Большое спасибо!) Я сейчас еще тему создам, вопрос есть еще!)) |
Вложений: 2
Кстати, товарищи, знаете ли Вы, что ничего особо нового придумывать не надо?
При подключении css можно использовать rel="alternate stylesheet", и тогда браузер (по крайней мере, Опера и Файрфокс точно) позолит пользователю выбрать скину самостоятельно. А всё, что нужно для «других» браузеров — скриптом поменять у нужного стиля rel на "stylesheet", а у ненужных стилей — на "alternate stylesheet". В аттаче — пример. |
Спорный вопрос - выбор альтернативного стиля в менюхе, о существовании которой многие и не подозревают.
|
subzey,
Круто, даже не знал о такой штуке. |
Скрипт не работает в mozzile помогите исправить!
|
subzey, а ведь действительно вряд ли кто-нибудь обнаружит эти стили. Да и что это значит?
Цитата:
|
| Часовой пояс GMT +3, время: 23:03. |