如何使用JS将样式修改为HTML元素（使用CSS外部样式）？

Question

如何使用JS将样式修改为HTML元素（使用CSS外部样式）？

因此，当我点击<p>家庭类的标签时，我希望它将颜色更改为绿色，但它不起作用，并且为什么这么做。单击寄存器很好（因为console.log（“测试”）显示正常）但更改颜色的其余功能将无法正常工作。这是我的css，html和js代码（js代码包含在HTML中，所以它不是外部文件或任何东西）：

.greyRect {

  height:150px;
  width:1350px;

  background-color: #D3D3D3;}h1 {
  text-align: center;}h2 {
    text-align: center;}.home {box-sizing: border-box;width:80px;height:35px;line-height: 2;
  position: relative;left:350;
  color:white;}.casinocraps {
  background-color: grey;box-sizing: border-box;width:120px;height:35px;text-align: center;line-height: 2;
  position: relative;left:460;bottom:50;
  color:white;}.tictactoe {
  background-color: grey;
  box-sizing: border-box;
  width:90px;
  height:35px;
  text-align: center;line-height: 2;
    position: relative;left:600;bottom:100;
    color:white;}.bingo {
  background-color: grey;
  box-sizing: border-box;
  width:80px;
  height:35px;
  text-align: center;
  line-height: 2;
    position: relative;
  left:700;
  bottom:150;
    color:white;}.concentration {
  background-color: grey;
  box-sizing: border-box;
  width:100px;
  height:35px;
  text-align: center;
  line-height: 2;
    position: relative;
  left:800;
  bottom:200;
    color:white;}footer {
  text-align: center;
    line-height: 4;
      position: relative;
  top:125;
  right:15;
  height:70px;
  width:1365px;

  background-color: #D3D3D3;}.border {
  height: 50px;
  width: 100px;
  border: 4px solid green;
  background-color: #555;
  position: relative;
  top:20;
  left:100;}.rectangle {
  height: 50px;
  width: 100px;
  background-color: #555;
  position: relative;
  top:50;
  left:100;}