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

标签 javascript html css

我目前正在编写一个占位符页面,该页面将通过 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,已更新!

最佳答案

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

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/

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

关于javascript - 通过 javascript 添加元素后,CSS 渐变不填充容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15205079/

相关文章:

javascript - Google 会阻止使用客户端 jsapi 调用获取用户位置的尝试吗?

html - 电子邮件中使用的单选按钮

html - 自定义 jsTree css 样式

javascript - 使用 jQuery 从另一个选择框的所选值显示和隐藏一个选择框的选项

css - 带图像的 Div float

html - 在页脚的一行中显示 5 列 - Bootstrap

css - 没有绝对位置的动态父级的 float div 100% 高度?

javascript - 使用 HTML/JQuery/CSS 依次显示 DIV

javascript - Highchart.js - 将自定义键添加到系列返回未定义

javascript - 将 SweetAlert2 与 TypeScript 一起使用,找不到模块 'sweetalert2/dist/sweetalert2.js' 的声明文件