JavaScript应用CSS3渐变

JavaScript apply CSS3 gradient

本文关键字：渐变 CSS3 应用 JavaScript      更新时间：2023-09-26

我正在尝试使用JavaScript应用CSS3渐变。我有一个随机的颜色数组，我选择其中一种颜色，然后将其应用于渐变。问题是，因为CSS3后台属性没有供应商前缀，所以我似乎无法全部设置它们。CSS中的一个例子是：

background: #3C60EF; /* Old browsers */
background: -webkit-linear-gradient(left top, #3C60EF, #133de5); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #3C60EF, #133de5); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #3C60EF, #133de5); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #3C60EF, #133de5); /* Standard syntax (must be last) */

所以，正如你所看到的，我不能将它们全部应用于元素。我需要弄清楚我在用什么浏览器，或者想办法添加所有这些。

如有任何帮助，我们将不胜感激。

将它们全部添加到一个类中，然后使用JavaScript将该类添加到元素中。

jQuery:

$('#my-element').addClass('mygradient');

香草：

document.getElementById('my-element').className = 'mygradient';

您可以动态创建一个新的样式表。将指向新样式表的链接附加到文档头-$("head").append("<style id='dynamicStylesheet'></style>");

然后像这样设置样式表的内容（使用随机颜色创建渐变）。

     var newGradientClassText = ".newGradientClass { "+
"background: #3C60EF; /* Old browsers */ " +
        "background: -webkit-linear-gradient(left top, " + randomColor + ", " + SecondrandomColor + "); /* For Safari 5.1 to 6.0 */ " + 
       " background: -o-linear-gradient(bottom right, " + randomColor + "," + SecondrandomColor + "); /* For Opera 11.1 to 12.0 */ " +
        "background: -moz-linear-gradient(bottom right, " + randomColor + ", " + SecondrandomColor + "); /* For Firefox 3.6 to 15 */ " +
       " background: linear-gradient(to bottom right, " + randomColor + ", " + SecondrandomColor + "); /* Standard syntax (must be last) */" +
"}";

然后设置样式表$("#dynamicStylesheet").text(newGradientClassText); 的文本

然后可以将类应用于元素$('#exampleElement').addClass(newGradientClass);

我正在实现@tinckbot的解决方案，但后来我找到了另一种方法。我创建了一个这样的类：

var self = this;
var _baseColour = '#3C60EF';
var _shadeColour = function (hex, lum) {
    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    lum = lum || 0;
    // convert to decimal and change luminosity
    var rgb = "#", c, i;
    for (i = 0; i < 3; i++) {
        c = parseInt(hex.substr(i * 2, 2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00" + c).substr(c.length);
    }
    return rgb;
};
function _getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
};
function _getRandomColour(colour) {
    var percent = _getRandomInt(-100, 100) / 100;
    colour = colour || _baseColour;
    return _shadeColour(colour, percent);
};
self.generateCSS = function (colour) {
    var colour1 = _getRandomColour(colour),
        colour2 = _shadeColour(colour1, -.1); // Shade 10% darker
    var rule = 'background: ' + colour1 + '; /* Old browsers */ ' +
                'background: -webkit-linear-gradient(left top, ' + colour1 + ', ' + colour2 + '); /* For Safari 5.1 to 6.0 */' +
                'background: -o-linear-gradient(bottom right, ' + colour1 + ', ' + colour2 + '); /* For Opera 11.1 to 12.0 */' +
                'background: -moz-linear-gradient(bottom right, ' + colour1 + ', ' + colour2 + '); /* For Firefox 3.6 to 15 */' +
                'background: linear-gradient(to bottom right, ' + colour1 + ' , ' + colour2 + '); /* Standard syntax (must be last) */';
    return rule;
};

在我的元素循环中，我只是这样做了：

var colour = attr.colouredTile;
var css = controller.generateCSS(colour);
element.setAttribute('style', css);
相关文章：