0

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

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

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

我是否能够模拟 chrome 检查元素控制台对 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，已更新！

4

1 回答 1

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));

}

小提琴：http: //jsfiddle.net/rc5VT/1/

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

于 2013-03-04T16:09:09.530 回答