javascript - 通过 javascript 添加元素后，CSS 渐变不填充容器

Question

我目前正在编写一个占位符页面，该页面将通过 HTML 面板在游戏中使用，并随游戏代码动态变化。

我目前正在使用该页面的搜索功能，但在后台使用渐变时遇到了问题。我正在使用 javascript 来动态填充搜索结果(稍后将通过游戏代码注入(inject)以显示正确的内容)。

当 javascript 在使用搜索框(同样是占位符)后添加填充文本时，渐变不会动态更改其端点以填充框的新宽度。它在新的空间开始了全新的渐变。然而，当我打开 chrome 检查元素控制台时，它会更新渐变以填充框(该游戏仅支持 webkit，因此为什么它只在考虑 webkit 元素的情况下构建)。

我能否模拟 chrome inspect element 控制台对 javascript 中的渐变所​​做的操作？

HTML

<section id="database-search">  
        <form action="javascript:showResults()">
            <input type="text" class="search-bar" placeholder="Search for Item..." checked="checked"></input>
        </form>
        <section id="search-results">
            <span id="search_results"></span>
        </section>
    </section>

CSS

.database-search {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(30%, #373737), color-stop(60%, #373737), color-stop(100%, #1e1e1e));
}

Javascript

function showResults() {
            document.getElementById('search_results').innerHTML = 'No Results Found.';
        }

谢谢!编辑:发布了错误的 CSS，已更新!

Answer 1

我试过你的代码。它似乎工作正常。

HTML

<section id="database-search">  

            <input type="text" class="search-bar" placeholder="Search for Item..." checked="checked"></input>
           <button value="click">Click</button>

        <section id="search-results">
            <span id="search_results"></span>
        </section>
    </section>

JavaScript

$('button').click(function(e) {
    document.getElementById('search_results').innerHTML = 'No Results Found.';
});

//我使用jquery来连接事件

CSS

#database-search {
                       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(30%, #373737), color-stop(60%, #373737), color-stop(100%, #1e1e1e));

}

fiddle :http://jsfiddle.net/rc5VT/1/

如果您对您的问题有更多的说明，那就太好了。