Question

嗨，我开始学习JavaScript，我有一个按钮，当我单击它时，它会将页眉，导航栏，页脚和一些文本从一种颜色更改为另一种颜色，当我再次单击它时，它将恢复为它。有一个正确的html / css文件，但是我不确定这是否正确。

是否可以通过某种方式使用id，以便我可以更改CSS？

这是我目前使用脚本的方法。

<script>

function changeColor() {
    var color = 0;
    if (color == 0) {

        document.getElementById("topBar").style.background = "#36648B"
        document.getElementById("topBar").style.color = "#C1F0F6"
        document.getElementById("myBlog").style.background = "#62B1F6"
        document.getElementById("navBar").style.background = "#9BC4E2"
        document.getElementById("footer").style.background = "#50A6C2"

        var y = document.getElementsByClassName("sideCol")

        y[0].style.background = "#C3E4ED"

    } 
}
</script>

Answer 1

我通常更喜欢添加/删除CSS类，而不是使用HTMLElement.style属性。 HTMLElement对象的.classList属性提供了几种方法来管理元素的className属性。

示例CSS：

#topBar.active-topbar {
  background: #36648B;
  color: #C1F0F6;
}

JavaScript：

var el = document.getElementById("topBar")
// adding a class:
el.classList.add('active-topbar')
// removing a class:
el.classList.remove('active-topbar')
// toggling a class:
el.classList.toggle('active-topbar')
// does the element have a specific class?
el.classList.contains('active-topbar')

这是一个交互式示例：

document.querySelector('#toggle-class').addEventListener('click', changeColor);

function changeColor() {
   document.getElementById('topBar').classList.toggle('active-topbar');
}

 #topBar {
   border: 1px solid #ccc;
   padding: 5px;
 }
 
 #topBar.active-topbar {
     background: #36648B;
     color: #C1F0F6;
  }

<div id="topBar">
   Top Bar
</div>
<br>
<button id="toggle-class">Toggle Color</button>

Answer 2

如果您想使用CSS文本，一种选择是将自己的<style>元素插入HTML：

function changeColor() {
  var color = 0;
  if (color == 0) {
    document.head.appendChild(document.createElement('style')).textContent = `
    #topBar {
      background: #36648B;
      color: #C1F0F6;
    }
    #myBlog {
      background: #62B1F6;
    }
    #navBar {
      background: #9BC4E2;
    }
    #footer {
      background: #50A6C2;
    }
    .sideCol {
      background: #C3E4ED;
    }
    `;
  }
}

setTimeout(changeColor, 1500);

<div id="topBar">top bar content</div>

如果要恢复效果，可以稍后再删除<style>元素。

Answer 3

我使用了简单的Javascript切换方式来更改颜色

HTML代码：

<input type="button" id="btnHousing" value="Housing" onclick="btnColor('btnHousing');" />
<p id='topBar'>
topBar
</p>
<p id='myBlog'>
myBlog
</p>
<p id='navBar'>
navBar
</p>
<p id='footer'>
footer
</p>

Javascript：

function btnColor(btn) {
var property = document.getElementById(btn);
    if (property.className !== 'toggled') {
        property.className = 'toggled'
          document.getElementById("topBar").style.background = "#36648B"
        document.getElementById("topBar").style.color = "#C1F0F6"
        document.getElementById("myBlog").style.background = "#62B1F6"
        document.getElementById("navBar").style.background = "#9BC4E2"
        document.getElementById("footer").style.background = "#50A6C2"
    }
    else {
        property.className = '';        
        document.getElementById("topBar").style.background = ""
        document.getElementById("topBar").style.color = ""
        document.getElementById("myBlog").style.background = ""
        document.getElementById("navBar").style.background = ""
        document.getElementById("footer").style.background = ""
    }
}

JSFiddle

如何使用JavaScript正确修改多个元素？

3 个答案: