如何在JavaScript中创建DIV样式切换器？

Question

我想在JavaScript中创建一个CSS样式切换器,就像digg.com在这里做的那样:http://digg.com/add-digg

我有一个div,我想在主题选择的基础上改变div框的样式.请给我任何链接或代码,我该怎么做.

我不想使用Jquery,我想开发这个鳕鱼ein纯javascript.

谢谢

Answer 1

在更改主题时检查源代码及其如何更改,这非常简单.Digg正在利用CSS的强大功能,通过简单地更改元素的类来彻底改变内容.你所要做的就是:

<div id="theme_viewer">
<!-- HTML code for your widget/thing to be styled -->
</div>

然后你可以拥有你的主题:

<ul>
  <li><a href="#" onclick="return switchTheme('theme1');">theme 1</a></li>
  <li><a href="#" onclick="return switchTheme('theme2');">theme 2</a></li>
  <li><a href="#" onclick="return switchTheme('theme3');">theme 3</a></li>
  <li><a href="#" onclick="return switchTheme('theme4');">theme 4</a></li>
</ul>

所有switchTheme需要做的就是改变theme_viewer传递给类的类:

function switchTheme(theclass) {
    var viewer = document.getElementById('theme_viewer');
    viewer.className = theclass;
    return false;
}

然后,您的CSS样式表可以执行不同样式所要求的任何内容:

#theme_viewer.theme1 {
    background-color: red;
}

#theme_viewer.theme2 {
    background-color: blue;
}

#theme_viewer.theme3 {
    background-color: black;
    color: white;
}

#theme_viewer.theme4 {
    background-color: orange;
}

这是一个在工作中的例子

正如JP的评论中提到的那样,在edeverett的回答中,将你的事件内联,因为我在这个例子中拥有它们(即,使用onclick属性)并不是一个好主意.我这样做是为了简单,但这不是一个好主意.更好的想法是等待您的文档使用Javascript动态加载和附加事件处理程序.这被称为不引人注目的Javascript,它是一个Good Thing ^TM.

遵循良好实践的上述示例的示例如下所示:

<ul id='theme_options'>
  <li><a href="#" id='theme1'>theme 1</a></li>
  <li><a href="#" id='theme2'>theme 2</a></li>
  <li><a href="#" id='theme3'>theme 3</a></li>
  <li><a href="#" id='theme4'>theme 4</a></li>
</ul>

然后我们使用这个跨浏览器的addEvent函数(由 jQuery的作者John Resig编写):

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}

要添加事件处理程序:

addEvent(window, 'load', function() {
    var opts = document.getElementById('theme_options');
    var links = opts.getElementsByTagName('a');
    for(var x = 0; x < links.length; x++) {
        addEvent(links[x], 'click', function() {
            switchTheme(links[x].id);
        });
    }
});

它可能比内联Javascript更冗长,但值得.我知道你说你想避免使用jQuery,但这样简单的事情会让你开始欣赏这个库,因为你可以用jQuery做一些简单的事情:

$(function() {
    $('a','#theme_options').click(function() {
        switchTheme($(this).attr('id'));
        return false;
    });
});