如何在 HTML 中设置 JavaScript 样式？答案

【问题标题】：How to style JavaScript in HTML?如何在 HTML 中设置 JavaScript 样式？
【发布时间】：2020-06-18 22:22:20
【问题描述】：

我创建了一个单词完成器。我使用 Bootstrap 进行样式设置，但我无法对输出产生任何影响。我在程序中使用 jQuery 和 JavaScript。结果显示在列表中。不知道怎么解决。

这是我的代码。

word_finder.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Autocomplete Sentences</title>

  <!-- Libraries -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



  <script>
  $( function() {
    var availableTags = [
      "Apple",
     ...
      "Python",
      "Ruby",
      "Scala",
      "Scheme",
      "Türk Hava Kurumu Üniversitesi"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>


<div class="ui-widget">
    <h1 style="color: purple;"> Word Finder </h1>
    <br>
  <p class=" lead text-primary">Welcome. As you start writing, suggestions will start to appear. </p>
  <label for="tags">Start typing </label>
  <input id="tags" class="form-control" style=" position: center;">
</div>

</body>
<style> ... <style>
</html>

【问题讨论】：

如果你控制列表 html 输出添加一个引导 css 类并获得预定义的样式 - 或者为 .ui-widget div 中的 ul 元素设置你自己的 css
这可能是一个 CSS 问题，很可能在 /resources/demos/style.css 中。当我测试你的代码时，它运行良好，看起来很好，但我当然没有那个文件。

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

考虑到您使用的是 jQuery 自动完成功能，它会在您的：

  <input id="tags" class="form-control" style=" position: center;">

标记 HTML：

<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui- 
   autocomplete ui-front" style="display: block;top: 32px;left: 
   50.6875px;width: 170px;">
   <li class="ui-menu-item"></li>
</ul>

你可以通过使用样式 ul 下拉列表

这里的任何课程

ui-menu ui-widget ui-widget-content ui-autocomplete ui-front

对于 li 使用“ui-menu-item”类来设置样式

<style>
.ui-autocomplete {
   background-color: red;
}
.ui-autocomplete .ui-menu-item {
   color: #FFF;
}
</style>

【讨论】：