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会将我的过滤器样式显示为被覆盖。

我检查我的计算样式，并且在我继承的样式中说，＆＃34; filter：none;＆＃34 ;.

这是从哪里来的？怎么设置？为什么我无法覆盖它？不应该＃向下箭头覆盖所有内容吗？

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">

过滤器未应用

1 个答案: