Фильтр не применяется

Question

Я пытаюсь применить стиль фильтра к изображению. Я использую jQuery mobile, но теоретически этот конкретный элемент должен быть вне стиля jQuery Mobile.

Мой CSS:

#down-arrow { 
     filter: hue-rotate(240deg) !important; 
    // Browser Specific 
    -webkit-filter: hue-rotate(240deg) !important; 
    -moz-filter: hue-rotate(240deg) !important; 
    -o-filter: hue-rotate(240deg) !important; 
    -ms-filter: hue-rotate(240deg) !important; 
} 

И мой образ в Javascript:

    var downArrowDiv = document.createElement("div"); 
        var downArrow = document.createElement("input"); 
        downArrow.setAttribute("src", "arrow.png"); 
        downArrow.setAttribute("type", "image"); 
        downArrow.setAttribute("class", "arrow"); 
        downArrow.setAttribute("data-enhance", "false"); 
        downArrow.setAttribute("data-role", "none"); 
        downArrow.setAttribute("id", "down-arrow"); 
        downArrow.setAttribute("onclick", "downVote()"); 

Однако элемент создан НЕ цвета сдвинуты, и Chrome показывает мой стиль фильтра, как быть переопределены.

Я проверяю свои вычисленные стили, и в моих унаследованных стилях говорится: «filter: none;».

Откуда это? Как он устанавливается? Почему я не могу переопределить его? Не должно # down-arrow отменять все?

Answer 1

Потому что у вас есть unacceptable comments syntax in CSS. Удалить, что // и заменить /* */ и его работает отлично

var downArrowDiv = document.createElement("div"); 
 
var downArrow = document.createElement("input"); 
 
downArrow.setAttribute("src", "https://mdn.mozillademos.org/files/3718/Test_Form_6.jpeg"); 
 
downArrow.setAttribute("type", "image"); 
 
downArrow.setAttribute("class", "arrow"); 
 
downArrow.setAttribute("data-enhance", "false"); 
 
downArrow.setAttribute("data-role", "none"); 
 
downArrow.setAttribute("id", "down-arrow"); 
 
downArrow.setAttribute("onclick", "downVote()"); 
 
downArrowDiv.setAttribute('class', 'divc'); 
 
downArrowDiv.appendChild(downArrow); 
 
document.body.appendChild(downArrowDiv);

#down-arrow { 
 
    filter: hue-rotate(240deg) !important; 
 
    -webkit-filter: hue-rotate(240deg) !important; 
 
    -moz-filter: hue-rotate(240deg) !important; 
 
    -o-filter: hue-rotate(240deg) !important; 
 
    -ms-filter: hue-rotate(240deg) !important; 
 
}

<img src="https://mdn.mozillademos.org/files/3718/Test_Form_6.jpeg">