Question

JS新手在这里

我希望有一种个人资料预览页面供人们选择颜色（可以点击图片或可以是单选按钮），并且可以更改预览页面中某些div的背景颜色。

IE有人点击按钮获取红色，然后标题栏，信息框等背景中的渐变将变为红色。

这是最好的方法吗？

Answer 1

如果您为每个“颜色”（读取：样式）定义您希望用户可用的特定样式表，我认为您最好。如果用户单击某些内容以进行颜色选择，则可以更改已加载的样式表。您可能需要一个default.css或一个main.css文件，其中包含所有定位和默认着色内容，对于每种颜色，您都有一个单独的css文件，如red.css，它将为您想要的dom中的每个元素加载颜色改变了。

在简单的Javascript中，这可能类似于：

<link rel="stylesheet" href="style1.css" id="stylesheet">

<script type="text/javascript">
    function changeStyle() {
        document.getElementById('stylesheet').href = 'style2.css';
    }
</script>

当然，你也可以包含像jQuery这样的库来为你做这件事。另一个选项（非JS）是在用户选择颜色并更改样式表服务器端时执行POST。但这会使页面刷新。

Answer 2

使用jQuery：

$(document).ready(function(){
    $('#my-button').click(function(){
        $('.title-bar').css({'background' : 'red'});
    });
});

修改

我刚刚将一个更好的（如“程序化”）解决方案整合在一起：http://jsfiddle.net/eNLs6/

$(document).ready(function(){ $('.colorchanger').click(function(){ $('#preview-div').css({'background' : $(this).val()}); }); });

Answer 3

我会在主体中添加一个类，然后在样式表中使用它来创建不同的主题。

JS：

$('#red').click(function() {
  document.body.className = 'red';
});

CSS：

body.red .title{background:url('red-gradient.png');}
body.red .color{color: red}
/* etc... */

您当然可以将每个主题放在一个单独的CSS文件中，以便于组织。但出于性能原因，我建议您一次加载所有CSS，只需交换类onclick，而不是动态样式表加载器。

Answer 4

我认为实现这一目标的最佳方法是为每种颜色（一般是主题）设置不同的div类，并在单击按钮或图像时更改div的css类：

$('#myRedButton').click(function(){$('#myDiv').attr('class','red')});
$('#myBlueButton').click(function(){$('#myDiv').attr('class','blue')});

你会有一个看起来像

的HTML

<div id="myDiv">....the div that will have it's color changed </div>
<img src="..." id="myRedButton"/>
<img src="..." id="myBlueButton"/>

Answer 5

为常规内容创建基本样式表（base.css），然后为每种颜色创建辅助样式表，例如red.css，blue.css

当用户点击红色图片时，它会加载red.css样式表。

 $('#red').click(function() {

//load red.css
}

有关详细信息，请参阅how to change a secondary stylesheet with jQuery上的此问题。

单击图像时如何更改样式表

5 个答案: