link rel=alternate网站替换功能

此方法借助HTML rel属性的alternate属性值实现。

<link href="reset.css" rel="stylesheet" type="text/css"> <link href="default.css" rel="stylesheet" type="text/css" title="默认"> <link href="red.css" rel="alternate stylesheet" type="text/css" title="红色"> <link href="green.css" rel="alternate stylesheet" type="text/css" title="绿色">

上面4个元素，共出现了3中不同性质的CSS样式文件加载：

• 没有title属性，rel属性值仅仅是stylesheet的无论如何都会加载并渲染，如reset.css；
• 有title属性，rel属性值仅仅是stylesheet的作为默认样式CSS文件加载并渲染，如default.css；
• 有title属性，rel属性值同时包含alternate stylesheet的作为备选样式CSS文件加载，默认不渲染，如red.css和green.css

实现案例：

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;
}

HTML代码：

背景色是？文字颜色是？

选择样式：默认红色绿色

JS代码：

var eleLinks = document.querySelectorAll('link[title]');
var eleRadios = document.querySelectorAll('input[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') == value) {link.disabled = false;}});});
});

此方法借助HTML rel属性的alternate属性值实现。

<link href="reset.css" rel="stylesheet" type="text/css"> <link href="default.css" rel="stylesheet" type="text/css" title="默认"> <link href="red.css" rel="alternate stylesheet" type="text/css" title="红色"> <link href="green.css" rel="alternate stylesheet" type="text/css" title="绿色">

上面4个元素，共出现了3中不同性质的CSS样式文件加载：

• 没有title属性，rel属性值仅仅是stylesheet的无论如何都会加载并渲染，如reset.css；
• 有title属性，rel属性值仅仅是stylesheet的作为默认样式CSS文件加载并渲染，如default.css；
• 有title属性，rel属性值同时包含alternate stylesheet的作为备选样式CSS文件加载，默认不渲染，如red.css和green.css

实现案例：

css代码：

HTML代码：

JS代码：

转载于:https://www.cnblogs.com/flowertime/p/11541242.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！