Question

我的JavaScript经验水平很低。我已经在该网站和网络上搜索了我的问题的答案，并找到了很多答案。我已经粘贴并测试了解决方案，但没有一个对我有用。我不知道我要去哪里错了。

我在这里选择了此代码，但是单击按钮没有做任何更改。甚至没有将等待光标设置为好像正在考虑它那样旋转。（目前，测试样式表angelfish仅尝试更改h2的颜色。）非常感谢您的帮助，因为我确实需要在自己的网站上进行此操作。

<!DOCTYPE html>
<html>
  <head>
    <link
      id="original"
      rel="stylesheet"
      type="text/css"
      href="https://cyndikirkpatrick.com/wp-content/themes/twentysixteen-child/ctc-style.css"
    />
  </head>
  <script>
    $('#original').click(function() {
      $('link[href="https://cyndikirkpatrick.com/wp-content/themes/twentysixteen-child/ctc-style.css"]').attr(
        'href',
        'style1.css'
      );
    });
    $('#angelfish').click(function() {
      $('link[href="https://cyndikirkpatrick.com/wp-content/themes/twentysixteen-child/angelfish.css"]').attr(
        'href',
        'style2.css'
      );
    });
  </script>
  <body>
    <h2>Javascript Change StyleSheet Without Page Reload</h2>
    <button id="original">Original</button><br />
    <button id="angelfish">Angelfish</button>
  </body>
</html>

https://cyndikirkpatrick.com/test/

我的最终目标：可以为我的库中的每个纹理集切换样式的页面，以生成此页面的简化版本： https://cyndikirkpatrick.com/angelfish-texture-tiles-teal/

Answer 1

如果您修改href，

样式不会动态重置和重新加载。但是，您可以删除样式并在正文中添加新样式。

// Remove
var elements = document.querySelectorAll('link[rel=stylesheet]');
for(var i=0;i<elements.length;i++){
    elements[i].parentNode.removeChild(elements[i]);
}

// Add
var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.id   = cssId;
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.com/css/stylesheet.css';
link.media = 'all';
document.body.appendChild(link);

Answer 2

我刚才回想起我使用的解决方案。我认为这与克里斯的建议最接近。我为每个纹理图块创建一个函数，然后在“演示色板”区域中单击显示它们。访客可以看到瓷砖作为重复的背景。

之所以这样做是因为研究主要提供了人们改变一个要素的例子。我看了很多视频，然后将W3school的一些代码拼凑在一起。

我相当确定我会以可想象的最笨拙和重复的方式进行此操作，但是随着对JavaScript的了解不断增长，我希望使代码优雅。目前，它可以正常工作并达到目的。

再次感谢所有人。

https://cyndikirkpatrick.com/texture-tiles/gray-texture-sets/

交换样式表OnClick演示页面

2 个答案: