Pages Menu Stijit.com
Twitter
Categories Menu

Кнопки, смена заднего фона и увеличение или уменьшение шрифта с помощью javascript

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
</head>
<body id="color" style="background-color:white;">

<div style="background-color:white;border:1px solid #888;border-radius:10px;height:70px;margin:20px;text-align:center;width:200px;">
<button id="but" onclick="buttonAction(this.id);" style="background-color:orange;border-radius:25px;font-size:20px;font-weight:bold;height:50px;margin-top:10px;width:50px;">1</button>
<button id="but2" onclick="buttonAction(this.id);" style="background-color:orange;border-radius:25px;font-size:20px;font-weight:bold;height:50px;margin-top:10px;width:50px;">2</button>
<button id="but3" onclick="buttonAction(this.id);" style="background-color:orange;border-radius:25px;font-size:20px;font-weight:bold;height:50px;margin-top:10px;width:50px;">3</button>
</div>

<div style="background-color:white;border:1px solid #888;border-radius:10px;height:90px;margin:20px;text-align:center;width:230px;">
<p>Changing body background colors:</p>
<span id="blue" onmouseover="spanAction(this.id);" onmouseout="spanAction('white');" style="background-color:blue;height:20px;padding:5px 10px;width:50px;">blue</span>
<span id="green" onmouseover="spanAction(this.id);" onmouseout="spanAction('white');" style="background-color:green;height:20px;padding:5px 10px;width:50px;">green</span>
<span id="orange" onmouseover="spanAction(this.id);" onmouseout="spanAction('white');" style="background-color:orange;height:20px;padding:5px 10px;width:50px;">orange</span>
<span id="lime" onmouseover="spanAction(this.id);" onmouseout="spanAction('white');" style="background-color:lime;height:20px;padding:5px 10px;width:50px;">lime</span>
</div>

<div style="background-color:white;border:1px solid #888;border-radius:10px;margin:20px;width:370px;">
<div id="text" style="font-size:14px;">
<p>Changing font size:</p>
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae consequuntur.</p>
</div>
<center>
<button id="more" style="border-radius:3px;font-size:14px;padding:2px 15px;">+</button>
<button id="less" style="border-radius:3px;font-size:14px;padding:2px 15px;">-</button>
</center>
</div>

<script>

function buttonAction(id) {
  var button = document.getElementById("but"),
    button2 = document.getElementById("but2"),
    button3 = document.getElementById("but3"),
    question = "Введите свое имя",
    def = "Имя",
    hi = "Привет ",
    youChose = "Вы выбрали кнопку ",
    buttonNumber = 0,
    name = prompt(question, def);
  switch(id) {
    case 'but':
      buttonNumber = 1;
      button.style.backgroundColor = "yellow";
      break;
    case 'but2':
      buttonNumber = 2;
      button2.style.backgroundColor = "green";
      break;
    case 'but3':
      buttonNumber = 3;
      button3.style.backgroundColor = "blue";
      break;
    }
    alert(hi + name + "! " + youChose + buttonNumber);
};



var span = document.getElementById("blue"),
    span2 = document.getElementById("green"),
    span3 = document.getElementById("orange"),
    span4 = document.getElementById("lime"),
    body = document.getElementById("color"),
    spans = document.querySelectorAll("span");
function spanAction(id) {
  switch(id) {
    case 'blue':
      body.style.backgroundColor = "blue";
      break;
    case 'green':
      body.style.backgroundColor = "green";
      break;
    case 'orange':
      body.style.backgroundColor = "orange";
      break;
    case 'lime':
      body.style.backgroundColor = "lime";
      break;
    case 'white':
      body.style.backgroundColor = "white";
      break;
  }
};



var div = document.getElementById("text"),
    buttonMore = document.getElementById("more"),
    buttonLess = document.getElementById("less");
buttonMore.onclick = function() {
  div.style.fontSize = parseInt(div.style.fontSize) + 1 + "px"; //Меняем строку размера текста, переписывая ее значение
  console.log(div.style.fontSize); //Смотрим в консоли что нам выдает div.style.fontSize (строка с текущим размером текста в px)
};
buttonLess.onclick = function() {
  div.style.fontSize = parseInt(div.style.fontSize) - 1 + "px"; //Меняем строку размера текста, переписывая ее значение
  console.log(div.style.fontSize); //Смотрим в консоли что нам выдает div.style.fontSize (строка с текущим размером текста в px)
};

</script>

</body>
</html>

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *