通過javascript添加元素後，CSS漸變未填充容器

我目前正在編寫一個佔位符頁面，該頁面將通過HTML面板在遊戲中使用並隨遊戲代碼動態更改。通過javascript添加元素後，CSS漸變未填充容器

我目前正在使用該頁面的搜索功能，並且在後臺使用的漸變有問題。我使用JavaScript來動態填充搜索結果（稍後將通過遊戲代碼注入以顯示正確的內容）。

當javascript在使用搜索框（再次，佔位符）後添加填充文本時，漸變不會動態更改其結束點以填充框的新寬度。它在新的空間開始一個全新的漸變。當我打開chrome inspect元素控制檯時，它會更新漸變以填充框（遊戲只支持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位，更新！

來源

2013-03-04 user1801301

我試過了你的代碼。它似乎工作正常。

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-04 16:09:09 Aravind

通過javascript添加元素後，CSS漸變未填充容器

回答

相關問題