2013-01-18 36 views
0

在以下函数中,我一直试图追加gradClass以在运行时将渐变背景应用于div。在运行时将CSS类添加到头标记中

function applyGradient(upto) { 

    var gradStyle = "background: -webkit-linear-gradient(left, #ff1a00 20%,#ffffff 30%);" 
        + "behavior: url(PIE-1.0.0/PIE.htc);" 
        + "-pie-background: linear-gradient(#ff1a00 20%, #ffffff 30%);"; 

    var newPercent = Math.floor(upto/end * 100); 
    gradStyle = gradStyle.replace(/20/gi, newPercent); 
    gradStyle = gradStyle.replace(/30/gi, "100"); 
    gradClass = ".gradClass{" + gradStyle + "}"; 

    //method 1 
    //jQuery('head').append($('<style>').text(gradClass)); 
    //error: IE8 some known issue in jQuery library 

    //method 2 
    //var styleTag = document.createElement('style'); 
    //styleTag.type = "text/css"; 
    //styleTag.appendChild(document.createTextNode(gradClass)); 

    //method 3 
    document.getElementsByTagName('style')[0].innerHTML += gradClass; 
    // Unknown runtime error in IE8. 

    jQuery("#container").addClass("gradClass"); 
} 

代码在Chrome中正常工作,但在IE8中失败。 未能应用该类使用method 1 jQuery,我也尝试了其他两种方法。

我在做什么错?

+0

的可能重复(http://stackoverflow.com/questions/ 707565 /怎么办,你加-CSS-与JavaScript的) – epascarello

回答

0
var $css = $('<style/>'); 
$css.appendTo('head'); 
$css.append("\n\ 
.hello { color:black; }\n\ 
.world { color:red; }"); 
0

你应该尝试使用jQuery的CSS功能:?你如何使用Javascript添加CSS]

http://api.jquery.com/css/

$("div").click(function() { 
    var color = $(this).css("background-color"); 
    $("#result").html("That div is <span style='color:" + 
        color + ";'>" + color + "</span>."); 
});