<a id="ya" href="https://yandex.ru">Yandex</a>

<br>
<select id="textColor">
  <option value="Green">Green</option>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Black">Black</option>
  </select>
<button onclick="setColor()">Set color</button><br>
<button onclick="toggleBig()">Toggle big/normal size</button>
<br>
<button onclick="toggleBorder('borderTop')">Border top</button>
<button onclick="toggleBorder('borderRight')">Border right</button>
<button onclick="toggleBorder('borderBottom')">Border bottom</button>
<button onclick="toggleBorder('borderLeft')">Border left</button>
.colorGreen { color: green; }
.colorRed   { color: red; }
.colorBlue  { color: blue; }
.colorBlack { color: black; }

.sizeBig { font-size: 2rem; }
.borderTop    { border-top: 2px solid #000; }
.borderRight  { border-right: 2px solid #000; }
.borderBottom { border-bottom: 2px solid #000; }
.borderLeft   { border-left: 2px solid #000; }
/* Задаём цвет текста в зависимости от выбраного из списка */
function setColor() {
  var textColor = document.getElementById("textColor");
  var val = textColor.value;
  var ya = document.getElementById("ya");

  ya.classList.remove("colorRed");//удалим все предыдущие
  ya.classList.remove("colorGreen");//несамый удачный вариант кода
  ya.classList.remove("colorBlue");
  ya.classList.remove("colorBlack");
  ya.classList.add("color" + val);
}

/* Включить/выключить большой размер текста */
function toggleBig() {
  var ya = document.getElementById("ya");
  ya.classList.toggle("sizeBig");
}

/* Красивый код. Рисуем рамку */
function toggleBorder(className) {
  document.getElementById("ya").classList.toggle(className);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.