rel=alternate实现换肤效果演示页面

展示

代码

• HTML：

  <div class="box">
      <img src="/assets/example.jpg">
      <p>背景色是？文字颜色是？</p>
  </div>
  <p>
      选择样式：
      <input id="default" type="radio" name="skin" value="default.css" checked><label for="default">默认</label>
      <input id="red" type="radio" name="skin" value="red.css"><label for="red">红色</label>
      <input id="green" type="radio" name="skin" value="green.css"><label for="green">绿色</label>
  </p>

• CSS：

  /* default.css中 */
  .box {
      outline: 5px solid;
      outline-offset: -5px;
  }
  /* red.css中 */
  .box {
      background-color: #cd0000;
      color: #fff;
  }
  /* gren.css中 */
  .box {
      background-color: green;
      color: orange;
  }

• JS：

  var eleLinks = document.querySelectorAll('link[title]');
  var eleRadios = document.querySelectorAll('[type="radio"]');
  [].slice.call(eleRadios).forEach(function (radio) {
      radio.addEventListener('click', function () {
          var value = this.value;
          [].slice.call(eleLinks).forEach(function (link) {
              link.disabled = true;
              if (link.getAttribute('href').includes(value)) {
                  link.disabled = false;
              }
          });
      });
  });