Javascript-форум - не могу нормально поменять css

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - не могу нормально поменять css (https://javascript.ru/forum/misc/43933-ne-mogu-normalno-pomenyat-css.html)

не могу нормально поменять css

изначально opacity = 0.7; после выполнения функции должно быть 1.0, но становится 0.3

function opp() 
   {
   er=document.getElementById('bn').style.opacity;
   er=er+0.3;
   document.getElementById('bn').style.opacity=er;
   setTimeout("opp()", 200);
   
   }

вот код полностью

<!DOCTYPE HTML >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id ="col">

<h1>заголовок</h1>
</div>
<img id="bn" src="2.jpg">
 <form>
   <p><input type="button" id="Yo" value=" Нажми меня нежно " onClick="opp()" ></p>
  </form>
  <script>
 
 
  var er=0;
  
	
   function opp() 
   {
   er=document.getElementById('bn').style.opacity;
   er=er+0.3;
   document.getElementById('bn').style.opacity=er;
   setTimeout("opp()", 200);
   
   }
  
  </script>

</body>
</html>

style возвращает inline-стиль, если я ничего не перепутал. Если opacity задано не с помощью атрибута style='opacity: .7', а из внешней таблицы стилей, то в er у вас попадает пустая строка. Затем к ней прибавляется (сложением строк, обратите внимание) 0.3 и в результате, очевидно, получается 0.3.

Исправить это можо, например, так:

function opp() 
{
var elem = document.getElementById('bn');
var er=getComputedStyle(elem, '').opacity;
er = +er + 0.3; // приводим строку к числу и складываем
elem.style.opacity = er;
}

Спасибо за ответ, вроде разобрался