javascript - 如何在 javascript 中自定义 <span>？

Question

我在网上找到了这段代码，并根据需要做了一些修改。我用 css 设置第一个选择列表的样式，但我不能对第二个选择列表做同样的事情。我认为它需要一些 js 修改，但我的 js 知识不是那么好。我如何像使用 css 自定义“slist1”一样自定义“slist2”？

<!-- The first select list -->
<style>
  #slist1 {
    height: 35px;
    border: 3px solid #0c3f6b;
    border-radius: 25px;
  }

  #scontent {
    color: #0c3f6b;
    font-size: 25px
  }
  
  #content {
    width: 290px;
    float: left;
    padding: 5px 15px;
  }
  
  #middle {
    width: 294px;
    /* Account for margins + border values */
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
  }
  
  #sidebar {
    width: 270px;
    padding: 5px 15px;
    float: left;
  }

</style>
<section id="content">
  PICK UP LOCATION
  <select name="slist1" div id=slist1 onchange="SList.getSelect('slist2', this.value);">
    <option>- - -</option>
    <option value="newyork">New York</option>
    <option value="miami">Miami</option>
  </select>
</section>
<!-- Tags for the seccond dropdown list, and for text-content -->
<section id="middle">
  <span id="slist2"></span>
</section>
<section id="sidebar">
  <div id="scontent"></div>
</section>


<script>
  <!--
  /* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
  var SList = new Object(); // JS object that stores data for options

  // HERE replace the value with the text you want to be displayed near Select
  var txtsl2 = 'DROP OFF LOCATION';

  /*
   Property with options for the Seccond select list
   The key in this object must be the same with the values of the options added in the first select
   The values in the array associated to each key represent options of the seccond select
  */
  SList.slist2 = {
    "newyork": ['San Diego', 'Portland','Ohio', 'San Francisco'],
    "miami": ['San Diego', 'Portland','Ohio', 'San Francisco'],
   
   };

  /*
   Property with text-content associated with the options of the 2nd select list
   The key in this object must be the same with the values (options) added in each Array in "slist2" above
   The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
  */
  SList.scontent = { 
    
    "San Diego": '45€',
    "Portland": '60€',
    "Ohio": '35€',
    "San Francisco": '25€',
    
};

  /* From here no need to modify */

  // function to get the dropdown list, or content
  SList.getSelect = function(slist, option) {
      document.getElementById('scontent').innerHTML = ''; // empty option-content

      if (SList[slist][option]) {
        // if option from the last Select, add text-content, else, set dropdown list
        if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
        else if (slist == 'slist2') {
          var addata = '<option>- - -</option>';
          for (var i = 0; i < SList[slist][option].length; i++) {
            addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
          }

          document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
        }
      } else if (slist == 'slist2') {
        // empty the tag for 2nd select list
        document.getElementById('slist2').innerHTML = '';
      }
    }
    -->

</script>

Answer 1

你会这样做:

#slist1,
#slist2 {
    height: 35px;
    border: 3px solid #0c3f6b;
    border-radius: 25px;
}

或者更好，像这样:

.slist {
    height: 35px;
    border: 3px solid #0c3f6b;
    border-radius: 25px;
}

然后更改您的 html 以使用类 (class="slist") 而不是 ID。

还值得注意的是，它们可能看起来并不完全相同，因为 span 和 select 元素具有非常不同的默认样式，并且样式元素很难设置样式(即以跨浏览器的方式)