交换样式表格为演示页面

我的JavaScript体验水平很小。我已经搜索了这个网站和网络以找到我问题的答案，并找到了很多问题。我剪切了，然后对解决方案进行了测试，但对我来说无效。我不知道我要去哪里。

我在这里拾取了此代码，但是单击按钮没有任何更改。甚至都不会设置等待光标旋转，就好像在想它一样。（暂时只尝试更改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/

样式如果修改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);

我暂时刚下来提及我使用的解决方案。我认为这最接近克里斯的建议。我正在为每个纹理瓷砖做一个功能，然后在"演示色板"区域中显示它们。访客可以看到瓷砖看起来像重复的背景。

我这样做了，因为研究主要提供了改变一个元素的示例。我看了很多视频，然后从W3School拼凑在一起。

我很确定我以最尴尬和重复的方式做到这一点，但我希望随着我对JavaScript的理解的增长，使代码优雅。目前，它有效并达到其目的。

再次感谢所有人。

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

相关内容

最新更新

热门标签：