如何在javascript调用后重新加载样式

how to reload styles after javascript call?

本文关键字：加载 样式 新加载 javascript 调用      更新时间：2023-09-26

我有以下html:

<div class="sk-toolbar-tools-primary">
   <span class="sk-custom-select">
      <select name="music-sort-select" id="music-sort-select">
          <option value="option1">Company 1</option>
          <option value="option2">Company 2</option>
          <option value="option3">Company 3</option>
     </select>
  </span>
</div>

正如你所看到的，这个select元素是使用CSS样式设计的，现在如果我使用AJAX调用从数据库发布公司，并使用这个Javascript函数注入对select的响应：

 function loadCompanies(){
    var companies= getCompanies();
    var select = document.getElementById("music-sort-select");
    for(var i = 0; i<companies.length; i++) {
        select.options[select.options.length] = new Option(companies[i].name,companies[i].id);
    }
}

在getCompanies()进行AJAX调用的情况下，Javascript函数运行良好，我可以看到使用chrome中的开发工具发布的DB中的数据，但select停止工作，它不会打开和显示选项。我想这是因为新选项在页面加载后加载时没有采用CSS样式。我该怎么解决？

浏览器应该立即应用CSS，即使在DOM中添加了新内容。您是否使用选择框替换脚本来通过CSS使选择框可设置样式？

可以使用Jquery完成
给出你的风格，按钮ID

jQuery(function($) {
var $output = $('#output')
  , $style = $('#styles')
  , $button = $('#preview')
;
$ed.val($style.html());
$button.click(function() {
    $style.html($output.val());
    return false;
});
});
相关文章：