[英]JavaScript apply CSS3 gradient
我正在嘗試使用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);
我當時正在實現@tinkerbot的解決方案,但是后來我找到了另一種方法。 我創建了一個像這樣的類:
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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.