How to Get the Opacity of an Element Using JavaScript

How do I get the opacity of an element using Javascript?

Setting a CSS value in a stylesheet is not the same as setting it through the style property. You need to look at the getComputedStyle method to obtain this (and also currentStyle for older IE).

How do I set opacity of an element using JS?

By modifying the style property.

myEl.style.opacity = 0.7;

How to check if an element is transparent (opacity) because of some parent element?

This solution allows you to find the closest parent whose opacity rule is less than 1. This means that it is this found parent that will affect the transparency of the child.

The search for an element starts with a child element, loop for(), so this will not cause any load.

let nested = document.querySelector("#nested")

function findOpacityElement(el) {
  for (; el && el !== document; el = el.parentNode) {
    if (getComputedStyle(el).opacity < 1) {
      console.log(el);
      console.log(getComputedStyle(el).opacity);
    } else {}
  }
};

findOpacityElement(nested);

#parent{
  width: 100px;
  height: 100px;
  background: red;
  opacity: .2;
}

#nested {
  background: green;
}

<div id="parent">
  <div>
    <div>
      <div id="nested">nested</div>
    </div>
  </div>
</div>

How would i get a button to change a objects opacity with html, js & css

If you want to use a button, you could add a data-* attribute to the button. It would look something like

<html>
<head>
<script>
    function myFunction(button) {
       // get data-opacity
       let opacity = button.dataset.opacity;
       const el = document.getElementById("p1");
       el.style.opacity = opacity;

       /* shorthand for
            if (opacity === "1") {
              button.dataset.opacity === "0";
            else {
              button.dataset.opacity === "1";
            }
       */
       button.dataset.opacity = opacity === "1" ? "0" : "1";
     }
</script>
</head>
<body>
<div id="p1">Opacity test</div>
<button data-opacity="0" onclick="myFunction(this)">Change opacity</button>
</body>
</html>

JS - Check element rendered opacity value

I thought of looping through the element's hierarchy...and save the minimum value

It's worse than that. :-) If ancestors have opacity, the values are combined (I believe they're multiplied together), note how the second one is lighter than the first:

<div style="opacity:0.3">  <div>Check Me</div></div><div style="opacity:0.3">  <div style="opacity:0.5">    <div>Check Me</div>  </div></div>

How to change the opacity on an element dynamically using javascript

There are a few problems there:

To get the current opacity of the element, you need to use the getComputedStyle function (or currentStyle property on oldIE), not .style.opacity. The latter only has a value if it's been assigned explicitly, rather than implicitly through style sheets.
The value will be a string, so you need to convert it to a number.
It's unlikely that you'll exactly match the target opaccity, so you need to just stop when you cross the target.
You don't put ; at the end of if statements, so remove those.
You assign the opacity, but then increment it, and then later the incremented value is what you check to see if you're done, so even if it weren't for #3, you'd stop early.
In JavaScript, the overwhelming convention is to start local variable names with a lower-case letter. I changed the name of your timer handle to timer.

Your best bet is to figure out what direction you're going, then stop when you pass the target:

// Polyfill getComputedStyle for old IEif (!window.getComputedStyle) {  window.getComputedStyle = function(element) {    return element.currentStyle;  }}
// Your _opacity functionfunction _opacity(ele, opacity, addOpac, delay) {  var direction;  ele = document.getElementById(ele);    // Determine direction  direction = +getComputedStyle(ele).opacity < opacity ? 1 : -1;  var timer = setInterval(function() {    // Get the *computed* opacity    var current = +getComputedStyle(ele).opacity;    if (direction > 0) {      if (current < opacity) {        increase(current);      } else {        stopInc();      }    }    else {      if (current > opacity) {        decrease(current);      } else {        stopInc();      }    }
  }, delay),
  increase = function(current) {    // Increase, but don't go past target    ele.style.opacity = Math.min(current + addOpac, opacity);  },
  decrease = function(current) {            // Decrease, but don't go past target    ele.style.opacity = Math.max(current - addOpac, opacity);
  },  stopInc = function() {    clearInterval(timer);  };};
// Run_opacity("target", 0.3, 0.05, 50);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --><script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script><div id="target">this is the element</div>

Setting opacity of html elements in different browsers

img.style.opacity = .5; //For real browsers;
img.style.filter = "alpha(opacity=50)"; //For IE;

You don't need to sniff the user agent, just set both values as browsers will ignore the irrelevant one.

Change opacity body without changing popup

Changing body’s opacity without affecting one of its child elements is not possible.

One solution to the problem is putting everything else on the page in an element that’s a sibling to the pop-up and changing the opacity of that element instead of body:

<div id="main">
    the rest of the body’s content
</div>
<div id="popup-news">
    [...]
</div>

JS:

…

if($('#popup-news').css('display') == 'none'){
    $('#main').css('opacity', '0.2');
}