使用Javascript为span元素应用两个Html选择下拉列表类

我正在处理HTML选择下拉列表。我有两个下拉列表，一个用于字体大小调整，另一个用于文本对齐

当我从下拉列表中选择fontsize时，它必须与文本大写引导css一起应用，如果我选择字体对齐方式，则所有三个都应应用于span元素。比如说

<div>
   <span id="Title"class="text-capitalize">check</span>
</div>

事实上，我是Javascript新手。一些我不明白的事情

输出结果将是以下各项的组合：

<span class="h1 left text-capitalize">Text</span>

所有内容都应该使用纯javascript

提前谢谢。请帮帮我

以下是使代码正常工作的方法。您需要在加载文档时运行代码，以便及时钩住onchange函数

但它的工作原理与您的预期不完全相同。路线类必须位于父图元上，并且在选择路线时，将忽略先前设置的h1或h2类

window.onload = function() {
    var font_size = document.querySelector('#font_size');

    // Bind onchange event
    font_size.onchange = function() {
     document.querySelector("#Title").className = this.options[this.selectedIndex].value += " text-capitalize";  
    };

    var text_align = document.querySelector('#text_align');

    // Bind onchange event
    text_align.onchange = function() {
     document.querySelector("#Title").className = this.options[this.selectedIndex].value;    
    };
};

---

你把事情搞混了。有两种方法可以很好地绑定事件，这两种方法在最近的浏览器中仍然很常见

第一个是在html代码中元素的onsomething属性中放置函数调用。任何放在那里的东西都将在事件发生时执行

<button onclick="alert('hi');">Click me</button>

在my functions中传递的名为e的事件对象包含有关触发事件的信息，可用于防止默认行为和控制事件传播。您不能在事件处理程序中使用它，但是调用处理程序的元素将存储在e.target中

在代码中，您创建了一些函数，这些函数在调用时将事件绑定到元素。然后将这些函数绑定到具有html属性的元素

最后，您似乎被困在querySelector和getElementById之间。请注意，querySelectorAll在getElementsBy。。。返回活动节点/节点列表。静态节点是有关元素的所有信息的副本。活动节点是对真实元素的引用。如果修改元素，它将修改活动节点，但静态节点将保留旧信息。您应该在querySelector上使用getElementById，因为它运行得更快。但是，为了代码简单，您可能更喜欢始终使用querySelector。只是不要在一行中使用querySelectorsomething，在另一行中使用getElementByIdsomething，这是最好的方法，因为您编写了querySelectorsomething或getElementByIdsomething，因此会让您感到困惑，并最终在bug上浪费时间

---

试试这个，希望它能起作用

答案不错，但文本对齐不起作用。我改了，明白吗

<button onclick="alert('hi');">Click me</button>

<button id="helloworld" onclick="helloworld_onclick(event)">Run</button>
...
function helloworld_onclick(e) {
    alert("Hello world!");
}

document.querySelector("#helloworld").addEventListener("click", function(e) {
    alert("Hello world!");
});

function changeFont_size (element) {

    if(element.options[element.selectedIndex].value != 'select'){

    document.getElementById('Title').className =   element.options[element.selectedIndex].value;
    } else{
document.getElementById('Title').className = '' }
}
function changeAlignment (element) {

      if(element.options[element.selectedIndex].value != 'select'){

    document.getElementById('container').className = element.options[element.selectedIndex].value;
    } else{
document.getElementById('container').className = '' }
}