Javascript 如何制作导入.css文件的按钮？_Javascript_Jquery_Html_Css_Button

Javascript 如何制作导入.css文件的按钮？

javascript jquery html css button

Javascript 如何制作导入.css文件的按钮？,javascript,jquery,html,css,button,Javascript,Jquery,Html,Css,Button,我想制作一个按钮，将样式导入到.css文件中有办法吗？如果不是，我的目标是用按钮改变多个css属性，本质上为网站创建主题 CSS文件： .body { background-image: url("example.png"); } HTML文件： <html> <head> <script> // ??? </script> </head> <body> <button onclick

我想制作一个按钮，将样式导入到.css文件中

有办法吗？如果不是，我的目标是用按钮改变多个css属性，本质上为网站创建主题

CSS文件：

.body {
    background-image: url("example.png");
}

HTML文件：

<html>
<head>

<script>
    // ???
</script>

</head>

<body>
    <button onclick="???">Import!</button>
</body>
</html>


// ???
进口！

编辑：任何东西，如jQuery，只要指定，都可以用来完成工作！我只需要让这一切顺利

您可以尝试以下方法：

$（“#灰度”）。单击（函数（）{
$（'link[href=“style1.css”]'）.attr（'href'，'style2.css'）；
});
$（“#原件”）。单击（函数（）{
$（'link[href=“style2.css”]'）.attr（'href'，'style1.css'）；
});我已经做过几次了
可以使用针对href属性的JS加载新样式表
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>


功能交换样式表（表）{
document.getElementById（'pagestyle'）.setAttribute（'href'，sheet）；
}



新样式表
默认样式表
我想你需要这个：
单击下面示例中的按钮
$（“.btn成功”）。单击（函数（）
{
$（'head'）。追加（''）；
});

我的第一个引导页面
调整此响应页面的大小以查看效果
点击我
第1栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
第2栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
第3栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
这可以相对容易地完成。首先，您需要捕获单击按钮的时间，然后需要添加在单击按钮时将添加到网站的样式。对于不同的按钮，您甚至可以定义不同的样式表（例如主题变换器）。执行此操作的代码是：
$('button.summer').click(function() {
    $('head').append('<link rel="stylesheet" href="assets/css/summer.css">');
});
$('button.summer').click(function() {
    $('head').append('<link rel="stylesheet" href="assets/css/winter.css">');
});

$（'button.summer'）。单击（函数（）{
$（'head'）。追加（''）；
});
$（'button.summer'）。单击（函数（）{
$（'head'）。追加（''）；
});

因此，当单击带有类summer的按钮时，另一个styleshet summer.css将添加到页面的标题部分
当点击winter类按钮时，另一个样式表winter.css将添加到页面的标题部分
这种工作方法首先要求将网站夏季和冬季costum主题的所有相同规则放入另一个通用主样式表中，例如general.css或style.css，并将summer.css和/或winter.css作为通用主题的唯一Costumisation应用
所以它们不会取代主题的常规样式表。。。他们通过根据您的需要为您的页面元素增加成本和创建额外的规则来扩展它
希望有帮助。
如果要加载CSS文件，请向文档中添加新的
元素，或者使用内联CSS将
元素添加到DOM中，作为元素的文本内容。仅使用CSS无法触发按钮事件。你需要JavaScript/JQuery来完成这个任务。@divy3993我可以添加JQuery，我只需要以任何可能的方式来完成，plz！你能把我的原始代码编辑成这个吗？我不确定一切都会走向何方。
$('button.summer').click(function() {
    $('head').append('<link rel="stylesheet" href="assets/css/summer.css">');
});
$('button.summer').click(function() {
    $('head').append('<link rel="stylesheet" href="assets/css/winter.css">');
});