兼容ie浏览器 网站变灰色
在遇到特殊情况的时候，我们作为站长需要紧急将网站变灰的需求，大家都知道通过简单的css样式即可实现,代码如下:
<style>
html{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
}
*{
filter: gray;
}
</style>上述代码配合指定网页在IE内核下的渲染模式，就可以达到效果，这个语句意思便是告诉IE浏览器，以IE9引擎来对页面进行渲染：
<meta http-equiv="X-UA-Compatible" content="IE=9" />对应主流的谷歌内核浏览器和部分小众品牌浏览器基本能都没问题,但是对于IE浏览器,如IE10或IE11中确无法实现。这里就需要引入一段JS来处理了，代码如下：
var grayscale = (function(){
var config = {
colorProps: ['color','backgroundColor','borderBottomColor','borderTopColor','borderLeftColor','borderRightColor','backgroundImage'],
externalImageHandler : {
/* Grayscaling externally hosted images does not work
- Use these functions to handle those images as you so desire */
/* Out of convenience these functions are also used for browsers
like Chrome that do not support CanvasContext.getImageData */
init : function(el, src) {
if (el.nodeName.toLowerCase() === 'img') {
// Is IMG element...
} else {
// Is background-image element:
// Default - remove background images
data(el).backgroundImageSRC = src;
el.style.backgroundImage = '';
}
},
reset : function(el) {
if (el.nodeName.toLowerCase() === 'img') {
// Is IMG element...
} else {
// Is background-image element:
el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';
}
}
}
},
log = function(){
try { window.console.log.apply(console, arguments); }
catch(e) {};
},
isExternal = function(url) {
// Checks whether URL is external: 'CanvasContext.getImageData'
// only works if the image is on the current domain.
return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);
},
data = (function(){
var cache = [0],
expando = 'data' + (+new Date());
return function(elem) {
var cacheIndex = elem[expando],
nextCacheIndex = cache.length;
if(!cacheIndex) {
cacheIndex = elem[expando] = nextCacheIndex;
cache[cacheIndex] = {};
}
return cache[cacheIndex];
};
})(),
desatIMG = function(img, prepare, realEl) {
// realEl is only set when img is temp (for BG images)
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
height = img.naturalHeight || img.offsetHeight || img.height,
width = img.naturalWidth || img.offsetWidth || img.width,
imgData;
canvas.height = height;
canvas.width = width;
context.drawImage(img, 0, 0);
try {
imgData = context.getImageData(0, 0, width, height);
} catch(e) {}
if (prepare) {
desatIMG.preparing = true;
// Slowly recurse through pixels for prep,
// :: only occurs on grayscale.prepare()
var y = 0;
(function(){
if (!desatIMG.preparing) { return; }
if (y === height) {
// Finished!
context.putImageData(imgData, 0, 0, 0, 0, width, height);
realEl ? (data(realEl).BGdataURL = canvas.toDataURL())
: (data(img).dataURL = canvas.toDataURL())
}
for (var x = 0; x < width; x++) {
var i = (y * width + x) * 4;
// Apply Monoschrome level across all channels:
imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =
RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);
}
y++;
setTimeout(arguments.callee, 0);
})();
return;
} else {
// If desatIMG was called without 'prepare' flag
// then cancel recursion and proceed with force! (below)
desatIMG.preparing = false;
}
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var i = (y * width + x) * 4;
// Apply Monoschrome level across all channels:
imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =
RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);
}
}
context.putImageData(imgData, 0, 0, 0, 0, width, height);
return canvas;
},
getStyle = function(el, prop) {
var style = document.defaultView && document.defaultView.getComputedStyle ?
document.defaultView.getComputedStyle(el, null)[prop]
: el.currentStyle[prop];
// If format is #FFFFFF: (convert to RGB)
if (style && /^#[A-F0-9]/i.test(style)) {
var hex = style.match(/[A-F0-9]{2}/ig);
style = 'rgb(' + parseInt(hex[0], 16) + ','
+ parseInt(hex[1], 16) + ','
+ parseInt(hex[2], 16) + ')';
}
return style;
},
RGBtoGRAYSCALE = function(r,g,b) {
// Returns single monochrome figure:
return parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
},
getAllNodes = function(context) {
var all = Array.prototype.slice.call(context.getElementsByTagName('*'));
all.unshift(context);
return all;
};
var init = function(context) {
// Handle if a DOM collection is passed instead of a single el:
if (context && context[0] && context.length && context[0].nodeName) {
// Is a DOM collection:
var allContexts = Array.prototype.slice.call(context),
cIndex = -1, cLen = allContexts.length;
while (++cIndex<cLen) { init.call(this, allContexts[cIndex]); }
return;
}
context = context || document.documentElement;
if (!document.createElement('canvas').getContext) {
context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
context.style.zoom = 1;
return;
}
var all = getAllNodes(context),
i = -1, len = all.length;
while (++i<len) {
var cur = all[i];
if (cur.nodeName.toLowerCase() === 'img') {
var src = cur.getAttribute('src');
if(!src) { continue; }
if (isExternal(src)) {
config.externalImageHandler.init(cur, src);
} else {
data(cur).realSRC = src;
try {
// Within try statement just encase there's no support....
cur.src = data(cur).dataURL || desatIMG(cur).toDataURL();
} catch(e) { config.externalImageHandler.init(cur, src); }
}
} else {
for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
var prop = config.colorProps[pIndex],
style = getStyle(cur, prop);
if (!style) {continue;}
if (cur.style[prop]) {
data(cur)[prop] = style;
}
// RGB color:
if (style.substring(0,4) === 'rgb(') {
var monoRGB = RGBtoGRAYSCALE.apply(null, style.match(/\d+/g));
cur.style[prop] = style = 'rgb(' + monoRGB + ',' + monoRGB + ',' + monoRGB + ')';
continue;
}
// Background Image:
if (style.indexOf('url(') > -1) {
var urlPatt = /\(['"]?(.+?)['"]?\)/,
url = style.match(urlPatt)[1];
if (isExternal(url)) {
config.externalImageHandler.init(cur, url);
data(cur).externalBG = true;
continue;
}
// data(cur).BGdataURL refers to caches URL (from preparation)
try {
var imgSRC = data(cur).BGdataURL || (function(){
var temp = document.createElement('img');
temp.src = url;
return desatIMG(temp).toDataURL();
})();
cur.style[prop] = style.replace(urlPatt, function(_, url){
return '(' + imgSRC + ')';
});
} catch(e) { config.externalImageHandler.init(cur, url); }
}
}
}
}
};
init.reset = function(context) {
// Handle if a DOM collection is passed instead of a single el:
if (context && context[0] && context.length && context[0].nodeName) {
// Is a DOM collection:
var allContexts = Array.prototype.slice.call(context),
cIndex = -1, cLen = allContexts.length;
while (++cIndex<cLen) { init.reset.call(this, allContexts[cIndex]); }
return;
}
context = context || document.documentElement;
if (!document.createElement('canvas').getContext) {
context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)';
return;
}
var all = getAllNodes(context),
i = -1, len = all.length;
while (++i<len) {
var cur = all[i];
if (cur.nodeName.toLowerCase() === 'img') {
var src = cur.getAttribute('src');
if (isExternal(src)) {
config.externalImageHandler.reset(cur, src);
}
cur.src = data(cur).realSRC || src;
} else {
for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
if (data(cur).externalBG) {
config.externalImageHandler.reset(cur);
}
var prop = config.colorProps[pIndex];
cur.style[prop] = data(cur)[prop] || '';
}
}
}
};
init.prepare = function(context) {
// Handle if a DOM collection is passed instead of a single el:
if (context && context[0] && context.length && context[0].nodeName) {
// Is a DOM collection:
var allContexts = Array.prototype.slice.call(context),
cIndex = -1, cLen = allContexts.length;
while (++cIndex<cLen) { init.prepare.call(null, allContexts[cIndex]); }
return;
}
// Slowly recurses through all elements
// so as not to lock up on the user.
context = context || document.documentElement;
if (!document.createElement('canvas').getContext) { return; }
var all = getAllNodes(context),
i = -1, len = all.length;
while (++i<len) {
var cur = all[i];
if (data(cur).skip) { return; }
if (cur.nodeName.toLowerCase() === 'img') {
if (cur.getAttribute('src') && !isExternal(cur.src)) {
desatIMG(cur, true);
}
} else {
var style = getStyle(cur, 'backgroundImage');
if (style.indexOf('url(') > -1) {
var urlPatt = /\(['"]?(.+?)['"]?\)/,
url = style.match(urlPatt)[1];
if (!isExternal(url)) {
var temp = document.createElement('img');
temp.src = url;
desatIMG(temp, true, cur);
}
}
}
}
};
return init;
})();
var navStr = navigator.userAgent.toLowerCase();
if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11
grayscale(document.body);
}大家有需要的自行复制到网页即可。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
wordpress大前端DUX主题
DUX主题是基于WordPress程序的主题，由themebetter团队原创开发，是目前比较火的wordpress主题；支持百度熊掌号，适用于垂直站点、科技博客、个人站，扁平化设计、简洁白色、超多功能配置
Vue实现换主题/皮肤功能
网站换肤，主题切换。网站的主题色可以在几种常用颜色之间进行切换，还有相关图片、图标也要跟随主题进行切换。文章由两部分组成：css切换，图片图标切换
Web前端主题切换的几种方案
本文将介绍 Web 前端主题切换的几种常用方案，示例代码基于 React 框架。废话少说，show you the code！这种方案利用了css多层样式精确匹配的特点，通过样式覆盖的方式实现主题的切换。
采用CSS3的VAR实现动态主题切换
官方称呼其为自定义属性，坊间通常叫做css变量，因为它类似于其他js语言中的变量，可用于存储颜色、字体、大小宽度等css属性值；定义方式为两个连字符也就是中划线（--）开头，引用方式为var(custom-property-name, value)
前端 “一键换肤“ 的几种方案
现在越来越多的网站都提供了拥有换肤（切换主题）功能，如 ElementUI，既是为了迎合用户需求，或是为了凸显自己特点，因此提供了个性化定制的功能.
Sass应用之实现主题切换
实现主题切换有几种不同的方案，比如使用CSS变量，使用JavaScript动态加载对应的主题样式文件等。本文主要讲的是如何使用Sass实现主题切换。
前端实现切换主题方案
前端开发人员面临着制作增强用户体验和适应用户偏好的用户界面的任务。带有 css 的 react 主要可用于创建多色可切换主题。为用户提供了在给定时间点在主题颜色之间切换以适合他们的偏好的特权。
使用CSS变量实现主题定制真的很简单
Varlet是通过css变量来组织样式的，什么是css变量呢，其实很简单，首先声明自定义的css属性，随便声明在哪个元素上都可以，不过只有该元素的后代才能使用，所以如果要声明全局所有元素都能使用的话，可以设置到根伪类:root下
常用Vue UI框架的主题切换
在如今，很多网页已经可以手动切换明亮模式和黑暗模式，网页的主题切换已经成为了一个常用的需求，因此，本文将从常见框架的处理方式总结一些相关的操作，并探究其本质。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!