Переключатель стиля переключателя с помощью JavaScript - PullRequest
Новая
       1

Переключатель стиля переключателя с помощью JavaScript

0 голосов
/ 17 мая 2011

Хотелось бы узнать, как сделать функцию переключения стилей для изменения стиля сайта между двумя стилями. Вот что я сделал до сих пор. Пожалуйста, проверьте. Спасибо. 

function switchcss() {
    document.write('<link rel="stylesheet" type"text/css" href="css/style1.css">'); 
    document.write('<link rel="stylesheet" type"text/css" href="css/style2.css">'); 
}

http://jsfiddle.net/APbSm/

Ответы [ 4 ]

1 голос
/ 17 мая 2011

Есть много способов снять шкуру с кошки , вот один из подходов, использующий jQuery: 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Switch Style Radio Button Using JavaScript</title>

    <link rel="stylesheet" href="css/style1.css" media="all" />
</head>

<body>

<input type="radio" name="switch" id="style1" value="Theme 1" checked="checked" />Theme 1<br />
<input type="radio" name="switch" id="style2" value="Theme 2" />Theme 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $('#style1').click(function() {
        $('link[rel="stylesheet"]').attr({
            href: 'css/style1.css'
        });
    });

    $('#style2').click(function() {
        $('link[rel="stylesheet"]').attr({
            href: 'css/style2.css'
        });
    });
</script>

</body>
</html>

Я понимаю, что это не лучший подход, но отвечает на вопрос автора постера с как можно меньшим количеством кода & mdash; Слава, что его можно легко скопировать, вставить и реализовать.

Однако, лучшее понимание проблемы может дать гораздо лучшее решение.

1 голос
/ 17 мая 2011

Вам необходимо понять, как можно использовать JavaScript для создания / удаления элементов DOM, включая link.

Пожалуйста, прочитайте, например, динамически загружать / удалять js и css

Кроме того, в большинстве случаев не рекомендуется использовать document.write ().Я мог бы написать вам полное правильное решение, но для этого не существует «универсальной» универсальной пары строк, и если вам нужен переключатель скинов, и вам необходимо его поддерживать в будущем, гораздо разумнее понятьтехнология под.

0 голосов
/ 04 апреля 2019

также лучше использовать: псевдо-класс первого типа, если существует более одной таблицы стилей 

<script>
$('#style1').click(function() {
    $('link[rel="stylesheet"]:first-of-type').attr({
        href: 'css/style1.css'
    });
});

$('#style2').click(function() {
    $('link[rel="stylesheet"]:first-of-type').attr({
        href: 'css/style2.css'
    });
});</script>
0 голосов
/ 17 мая 2011

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

<link rel="stylesheet" type="text/css" href="style1.css" id="switch_style"/>

JS материал: 

<script type="text/javascript">
(function(){
  function getEvent (e) {
    if(!e) e = window.event;
    if(e.srcElement) e.target = e.srcElement;
    return e;
  }
  function addEvent (object,type,listener,param) {
    if(object.addEventListener) {
      object.addEventListener(type, 
        function(e){ 
          listener.call(object, e, param);
        }, 
        false );
    } else if(object.attachEvent) {
      object.attachEvent('on'+type, 
        function(e){ 
          e = getEvent(e); 
          listener.call(object, e, param);
        }
      );
    }
  }
  var default_style = 1,
      container = document.getElementById('switch_container'),
      controls = container.childNodes,
      styles = document.getElementById('switch_style');
  function switch_style(event){
    event = getEvent(event);
    s = event.target.getAttribute('value');
    styles.setAttribute('href, 'style' + s + '.css');
  }
  [].map.call(controls, function( e, i, l ){
    if( e.nodeType === 1 && e.getAttribute('type') === 'radio' ) {
      addEvent( e, 'click', switch_style );
    }
  })
  // bind the function to the event handler.
})()
</script>

DOM вещи: 

<div id="switch_container">
  <input type="radio" name="switch" value="1"/>style 1<br/>
  <input type="radio" name="switch" value="2"/>style 2<br/>
  <input type="radio" name="switch" value="3"/>style 3<br/>
  <input type="radio" name="switch" value="4"/>style 4<br/>
  <input type="radio" name="switch" value="5"/>style 5<br/>
  <input type="radio" name="switch" value="6"/>style 6<br/>
</div>

JSFIDDLE

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...