Question

我正在研究HTML选择Dropdown。我有两个下拉菜单，一个是字体大小调整，另一个是文本对齐。

当我从下拉列表中选择fontsize时，它必须与text-capitalize（bootstrap css）一起应用，如果我选择字体对齐，则所有三个都应该应用于span元素。例如。

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

现在代码就像这样

function changeFont_size () {
var select = document.getElementById('font_size');
// Bind onchange event
  select.onchange = function() {
      document.querySelector("#Title").className = this.value += " text-   
      capitalize";   
     };
}
function changeAlignment () {
   var select = document.getElementById('text_align');

  // Bind onchange event
  select.onchange = function() {
    document.querySelector("#Title").className = this.value;     
 };
}

其实我是Javascript的新手。一些我没有得到的。

输出结果将是：

的组合

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

一切都应该是纯粹的javascript。

提前致谢。请帮助我。

以下是Link

Answer 1

此jsfiddle可让您的代码正常运行。您需要在加载文档时运行代码，以便及时挂接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;    
    };
};

Answer 2

你正在混淆。绑定事件有两种方法（好吧，即使是最近的浏览器，这两种方式仍然很常见）。

第一个是将函数调用放在html代码中元素的onsomething属性中。无论发生什么，都会在事件发生时执行。

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

您应该将事件对象传递给事件处理程序，而不是编写内联代码。

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

如果您希望能够动态绑定事件，如果要将多个事件绑定到对象，并且想要将JavaScript保留在HTML之外，那么现代的方法是使用addEventListener

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

传递的事件对象（在我的函数中称为e）包含有关触发事件的内容的信息，可用于防止默认行为和控制事件传播。您不能在事件处理程序中使用“this”，但调用处理程序的元素将存储在e.target中。

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

最后，您似乎陷入了querySelector和getElementById之间。请注意，querySelector（All）返回静态节点/ nodelist，而getElement（s）By（...）返回实时节点/ nodelist。静态节点是有关该元素的所有信息的副本。活动节点是对真实元素的引用。如果修改元素，它会修改活动节点，但静态节点将保留旧信息。您应该对querySelector使用getElementById，因为它运行得更快。但是，为了简化代码，您可能更喜欢始终使用querySelector。只是不要在一行上使用querySelector("#something")和在另一行上使用getElementById("something")混合，这是最好的混淆方式并最终浪费时间在一个错误，因为你写了querySelector("something")或{{ 1}}而不是。

Answer 3

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 = '' }
}

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

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

3 个答案: