我正在通过Firefox中的JavaScript编辑CSS渐变.我有输入框,用户可以放置1.方向2.第一种颜色3.第二种颜色
这是html
<html>
<head>
<title>Linear Gradient Control</title>
<script>
function renderButton(){
var orientation = document.getElementById("firstValue").value;
var colorOne = document.getElementById("firstColor").value;
var colorTwo = document.getElementById("secondColor").value;
//alert(orientation);
//alert(colorOne);
//alert(colorTwo);
};
</script>
<style>
#mainHolder
{
width:500px;
background: -moz-linear-gradient(left, green, red);
}
</style>
</head>
<body>
<h1>Gradient Editor</h1>
<form>
<input type="text" id="firstValue">orientation</input><br />
<input type="text" id="firstColor">first color</input><br />
<input type="text" id="secondColor">second color</input><br />
</form>
<button type="button" onclick="renderButton()">Render</button>
<div id="mainHolder">Content</div>
</body>
</html>
因此,回顾一下,用户将指定它们的3个值,这些值将传递给函数'renderButton();'.我可以使用哪一行来更改CSS3渐变的3个值,以便用户可以创建自己的自定义渐变框？我假设我只需要一两行.
PS我意识到这个例子只适用于Firefox.我只想在使用不同的浏览器之前先了解这个概念.
我想以编程方式向元素添加渐变背景.
使用适当的CSS,就像这样
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); /* W3C */
现在,我想用JavaScript来做.所以我想到了这样的事情:
gradientList.forEach(gradient => el.style.background = gradient)
但是,这不起作用.每次都会覆盖background属性,并且只应用列表中的最后一个渐变.
对于大多数其他属性,供应商之间的属性名称是不同的,linear-gradient但是,它们都是background.
现在,我知道我可以在元素中添加一个类名并附加一个style节点document.head(这就是我现在正在做的事情),但它非常hackish,而且我想要一个更好的DOM做事方式.
简而言之,如何使用vanilla JavaScript将供应商前缀渐变添加到DOM元素？
嗨,我想background-image用jquery 设置所有浏览器:
background-image:linear-gradient(green, blue); /* Norme W3C */
background-image:-moz-linear-gradient(green, blue); /* Firefox */
background-image:-webkit-gradient(linear, green, blue); /* Chrome, Safari */
background-image:-o-linear-gradient(green, blue); /* Opera */
background-image:-ms-linear-gradient(green, blue); /* IE */
我这样设置:
$("#"+elmt).css("background-image" , "linear-gradient("+hex+","+$('#test2').val()+")" );
仅适用于W3C,但它适用于Firefox,但不适用于Chrome.
如何设置所有这些设置？