如何创建DIV样式切换器？

Question

我想用JavaScript创建一个CSS样式切换器，就像Digg在这里做的那样

我有一个div，我希望在主题选择的基础上更改div框的样式。

我不想使用jQuery，我想用纯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;
}

here is an example of this at work

正如J-P的评论中提到的那样，在edeverett的回答中，将你的事件内联起来并不是一个好主意，因为我在这个例子中有了它们（即，onclick属性）。我这样做是为了简单，但这不是一个好主意。更好的想法是等待您的文档使用Javascript动态加载和附加事件处理程序。这被称为不引人注目的Javascript，它是一件好事 ^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函数（written by John Resig，jQuery的作者）：

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;
    });
});

Answer 2

这有三个部分：

1）div本身 对于所有款式，这几乎保持不变。 Javascript只会更改class属性以更改CSS应用于div的样式。创建div，使其在创建页面时具有默认样式并添加id，以便我们以后可以使用Javascript轻松获取它：

<div class="style1" id="styleBox"></div>

2）CSS 在你的CSS中，你需要为你想要div的每种方式提供一个类。首先在一个样式规则中设置所有通用属性，如宽度和高度：

.style1,
.style2,
.style3 {widht:200px; height:400px; text-size:1em;}

然后设置各个样式的规则：

.style1 {background-color：aqua;} .style2 {background-color：yellow;} .style3 {background-color：pink;}

请注意，这些都在相同的样式表中，这样可以更容易管理。

3）Javascript 这是您添加行为的位置。你还需要一些点击链接，理想情况下这些链接应该用JS创建，因为它们对用户没有任何用处 - 但是现在假设它们在页面中：

<div id="styleMenu">
  <a href="#" id="style1" >Style 1</a>
  <a href="#" id="style2" >Style 2</a>
  <a href="#" id="style3" >Style 3</a>
</div>

你需要有一个在页面加载时运行的JS函数（google“javascript onload function”）。在这个函数中，你需要获得对包含链接的div的引用，并添加一个onClick事件。当链接被点击时，这个事件将被触发 - 这称为事件委派（google it）。在此事件函数中，您需要使用event.target (or event.srcElement for IE).找出已单击的链接然后将样式化div的className属性设置为所单击链接的ID。

我会把实际的JS写给你，但是如果你使用这种稍微长一点的做事方式 - 而不是使用内联样式或javascript - 你就会干净利落地分离HTML，CSS和Javascript，这将使得维护一切都很重要更容易。

Answer 3

非常简单，用户选择一种颜色（＃544856）然后你使用onchange事件或类似的东西并执行：

 document.getElementById("myDiv").style.color = 
       document.getElementById("myColorTextBox").value;

Answer 4

最简单的方法是创建2个样式表，其中包含相同的类，但颜色不同等。然后允许用户在它们之间切换，这是一个示例的链接：

example

Answer 5

这可能会对您有所帮助：“Dynamically loading an external JavaScript or CSS file”

因此，当用户单击主题更改按钮时，onclick事件会加载外部CSS文件。

使用jQuery可能更容易/更快。您还需要存储变量以指示用户已选择不同的主题。