在所有浏览器中动态更改渐变颜色
Dynamic change of gradient colors in all browsers
我想创建一个脚本,用户可以通过在两个不同的文本字段中输入颜色代码来设置div的渐变。
这是我的代码:
<style>
#gradient {
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1; }
</style>
<script>
function myFunction()
{
color1 = document.getElementById("color1").value;
color2 = document.getElementById("color2").value;
document.getElementById("gradient").style.background="-webkit-gradient(linear, left top, left bottom, from("+color1+"), to("+color2+"))";
document.getElementById("gradient").style.background="-webkit-linear-gradient("+color1+", "+color2+")";
document.getElementById("gradient").style.background="-moz-linear-gradient(top, "+color1+", "+color2+")";
document.getElementById("gradient").style.background="-ms-linear-gradient("+color1+", "+color2+")";
document.getElementById("gradient").style.background="-o-linear-gradient("+color1+", "+color2+")";
document.getElementById("gradient").style.background="linear-gradient("+color1+", "+color2+")";
document.getElementById("gradient").style.filter="progid:DXImageTransform.Microsoft.Alpha(startColorstr='"+color1+"', endColorstr='"+color2+"')";
}
</script>
<input type="text" id="color1" onkeyup="myFunction()" value="#E9EDF6"></input>
<input type="text" id="color2" onkeyup="myFunction()" value="#AABBDD"></input>
<div id="gradient" style="height:500px">
I have gradient
</div>
该功能在Firefox和IE10中运行良好,但在较旧的IE版本中则不然。我猜这是因为最后一个后台调用覆盖了适用于旧IE版本的其他调用。
那么你会怎么做呢?我是否应该创建一个函数,在调用颜色更改函数之前先检查使用的浏览器?
你可能想看看惊人的终极CSS渐变生成器。
如您所见,它生成的代码比您执行的代码多,每行末尾的注释指示哪些浏览器受该行影响:
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
具体来说,最后一行是您需要的,用于IE6-IE9。
对于不处理渐变的旧浏览器(IE5.5...),您可能还希望包含第一行。
编辑
在javascript中也添加过滤器部分,在其他行之后:
document.getElementById("gradient").style.filter =
"progid:DXImageTransform.Microsoft.Alpha(startColorstr='"+
color1+"', endColorstr='"+color2+"')"
并且,根据此答案,请务必设置overflow: auto
或设置对象的高度。
编辑#2
你是对的,它会与其他属性中断(在 CSS 中不会影响它)。
然后检查是不是IE,并使用此JS:
document.getElementById("gradient").filters.item("DXImageTransform.Microsoft.gradient").startColorstr = color1;
document.getElementById("gradient").filters.item("DXImageTransform.Microsoft.gradient").endColorstr = color2;
相关文章:
- 颜色滑块渐变
- 如何在android中使用HTML/CSS赋予文本渐变颜色
- d3.js轴标签-颜色不变
- 在点击行后给行颜色,并请求其他页面保持颜色不变
- ext js 将面板的颜色更改为渐变
- 以递增的渐变对十六进制颜色代码进行排序
- 当前日期js代码中字体颜色不变
- three.js为几何体中的每个顶点指定不同的颜色(渐变)
- 使用javascript更改背景图像时保持渐变不变
- Div 渐变的颜色选择器
- d3.js单击时交替颜色,单击另一个点时变回原始颜色
- jQuery 在滚动背景上动画颜色不变
- 文本区域的背景颜色不变
- HTML 5 画布:删除线条边缘的颜色渐变
- 在 Shopify 中显示颜色变体的名称
- 渐变填充颜色和隐藏图像
- 鼠标移动时更改渐变背景颜色
- 两个径向渐变的颜色,结合时结合
- SVG操纵渐变填充颜色
- HTML5渐变:改变渐变的颜色会改变画布上三角形的颜色