locked
visual studio 2012, "-ms-gradient" can not be set into innerHTML RRS feed

  • Question

  • hi, everybody:

    when i develop win store app within javascript/html5, i came across such a problem:

    when i set "-ms-gradient" style into an elment's innerHTML, it is does not take effect:

    a.innerHTML = '<div id="b" style="width:100%;height:100%;background-image:-ms-linear-gradient(left, rgb(166,162,143) 0, rgba(166,162,143,.6) 15%, rgba(166,162,143,.4) 35%, rgba(166,162,143,0) 50%);"></div>';

    when I use $('<div.....>'), it also doesn't work.

    but when i modify the element's style, it works:

    $('#b').css('background-image', '-ms-linear-gradient(left, rgb(166,162,143) 0, rgba(166,162,143,.6) 15%, rgba(166,162,143,.4) 35%, rgba(166,162,143,0) 50%)');

    I've detect the dom by dom inspector, and add break point before innerHTML alternate. I found that the attributes of the element lost the gradient information.

    Beg your help.

    Thank you.

    Friday, November 30, 2012 12:42 PM

Answers

  • +1. That is odd.

    var a = document.createElement('div');
    a.innerHTML = '<div id="b" style="width: 100px;background-image:-ms-linear-gradient(left, rgb(166,162,143) 0, rgba(166,162,143,.6) 15%, rgba(166,162,143,.4) 35%, rgba(166,162,143,0) 50%);height: 100px"></div>';

    It's not set with innerHTML.
    'width: ' + a.firstChild.style.width + ' backgroundImage: ' + a.firstChild.style.backgroundImage 

    However if set via cssText or style it is set:
    a.firstChild.style.cssText = "background-image:-ms-linear-gradient(left, rgb(166,162,143) 0, rgba(166,162,143,.6) 15%, rgba(166,162,143,.4) 35%, rgba(166,162,143,0) 50%);";
    a.firstChild.style.backgroundImage = "-ms-linear-gradient(left, rgb(166,162,143) 0, rgba(166,162,143,.6) 15%, rgba(166,162,143,.4) 35%, rgba(166,162,143,0) 50%)";

    'width: ' + a.firstChild.style.width + ' backgroundImage: ' + a.firstChild.style.backgroundImage

    The odd thing is that these properties work:

    var a = document.createElement('div');
    a.innerHTML = '<div id="b" style="-ms-transform: scale(0.9); -ms-transition: -ms-transform linear 1s;"></div>';
    'transform: ' + a.firstChild.style.msTransform + ' transition: ' + a.firstChild.style.msTransition;


    • Marked as answer by Song Tian Thursday, December 6, 2012 9:10 AM
    Saturday, December 1, 2012 10:46 PM
  • Hi Stefan,

    For Windows Store app with HTML5 + javascript, it use the same browser core as IE 10, and you can directly use the gradients css styles without the "-ms" prefix.

    #Gradients (Windows)
    http://msdn.microsoft.com/en-us/library/ie/hh673532(v=vs.85).aspx

    Also, based on my local test, the following code works well (which construct html elements either via jquery or plain string and assign it to existing DOM elements/containers) works correctly in my Windows Store js app. So you can try it to see if it is the cause ( For js code that need to directly manipulate DOM tree/content, it is recommended that you use MSApp.execUnsafeLocalFunction to wrap them).

    document.querySelector("button.btn-css-test").addEventListener("click", function () {
                    MSApp.execUnsafeLocalFunction(function () {
                        var div = document.getElementById("jqPanel");
                        var gd1 = $("<div style='width:200px;height:100px;background-image: linear-gradient(to bottom left, #FFF133 0%, #16D611 50%, #00A3EF 80%);' ></div>");
                        var gd2 = $("<div style='width:100px;height:100px;background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);' ></div>");
                        div.appendChild(gd1[0]);
                        div.appendChild(gd2[0]);
                        
                        document.getElementById('gd3').style.backgroundImage = "repeating-linear-gradient(#00A3EF, #FFF133 30px, #00A3EF 50px)";
                        
                        var gd4 = document.getElementById('gd4');
                        WinJS.Utilities.setOuterHTML(gd4, "<div style='width:150px;height:150px;background-image: repeating-radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF, #FFF133);'></div>");
     
                    });
                });


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Thursday, December 6, 2012 9:10 AM
    Tuesday, December 4, 2012 6:34 AM
    Moderator

All replies

  • +1. That is odd.

    var a = document.createElement('div');
    a.innerHTML = '<div id="b" style="width: 100px;background-image:-ms-linear-gradient(left, rgb(166,162,143) 0, rgba(166,162,143,.6) 15%, rgba(166,162,143,.4) 35%, rgba(166,162,143,0) 50%);height: 100px"></div>';

    It's not set with innerHTML.
    'width: ' + a.firstChild.style.width + ' backgroundImage: ' + a.firstChild.style.backgroundImage 

    However if set via cssText or style it is set:
    a.firstChild.style.cssText = "background-image:-ms-linear-gradient(left, rgb(166,162,143) 0, rgba(166,162,143,.6) 15%, rgba(166,162,143,.4) 35%, rgba(166,162,143,0) 50%);";
    a.firstChild.style.backgroundImage = "-ms-linear-gradient(left, rgb(166,162,143) 0, rgba(166,162,143,.6) 15%, rgba(166,162,143,.4) 35%, rgba(166,162,143,0) 50%)";

    'width: ' + a.firstChild.style.width + ' backgroundImage: ' + a.firstChild.style.backgroundImage

    The odd thing is that these properties work:

    var a = document.createElement('div');
    a.innerHTML = '<div id="b" style="-ms-transform: scale(0.9); -ms-transition: -ms-transform linear 1s;"></div>';
    'transform: ' + a.firstChild.style.msTransform + ' transition: ' + a.firstChild.style.msTransition;


    • Marked as answer by Song Tian Thursday, December 6, 2012 9:10 AM
    Saturday, December 1, 2012 10:46 PM
  • Hi Stefan,

    For Windows Store app with HTML5 + javascript, it use the same browser core as IE 10, and you can directly use the gradients css styles without the "-ms" prefix.

    #Gradients (Windows)
    http://msdn.microsoft.com/en-us/library/ie/hh673532(v=vs.85).aspx

    Also, based on my local test, the following code works well (which construct html elements either via jquery or plain string and assign it to existing DOM elements/containers) works correctly in my Windows Store js app. So you can try it to see if it is the cause ( For js code that need to directly manipulate DOM tree/content, it is recommended that you use MSApp.execUnsafeLocalFunction to wrap them).

    document.querySelector("button.btn-css-test").addEventListener("click", function () {
                    MSApp.execUnsafeLocalFunction(function () {
                        var div = document.getElementById("jqPanel");
                        var gd1 = $("<div style='width:200px;height:100px;background-image: linear-gradient(to bottom left, #FFF133 0%, #16D611 50%, #00A3EF 80%);' ></div>");
                        var gd2 = $("<div style='width:100px;height:100px;background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);' ></div>");
                        div.appendChild(gd1[0]);
                        div.appendChild(gd2[0]);
                        
                        document.getElementById('gd3').style.backgroundImage = "repeating-linear-gradient(#00A3EF, #FFF133 30px, #00A3EF 50px)";
                        
                        var gd4 = document.getElementById('gd4');
                        WinJS.Utilities.setOuterHTML(gd4, "<div style='width:150px;height:150px;background-image: repeating-radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF, #FFF133);'></div>");
     
                    });
                });


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Thursday, December 6, 2012 9:10 AM
    Tuesday, December 4, 2012 6:34 AM
    Moderator