I'm trying to change the background opacity of the body onclick inside a function which shows and hides a menu. Similar to a the effect you have with a modal box. I'm trying to do this using document.getElementsByTagName("body"), but doesn't seem to change it.

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.getElementsByTagName("body")[0].style.opacity = "0.5";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementsByTagName("body")[0].style.opacity = "0.5";
}

$('body').click(function() {
  $(this).toggleClass('a b');
});

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.4s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<script src=".1.1/jquery.min.js"></script>
<div id="testDiv">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
</div>
</div>

I'm trying to change the background opacity of the body onclick inside a function which shows and hides a menu. Similar to a the effect you have with a modal box. I'm trying to do this using document.getElementsByTagName("body"), but doesn't seem to change it.

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.getElementsByTagName("body")[0].style.opacity = "0.5";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementsByTagName("body")[0].style.opacity = "0.5";
}

$('body').click(function() {
  $(this).toggleClass('a b');
});

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.4s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testDiv">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
</div>
</div>

Codepen: https://codepen.io/88zero/pen/qYZxaE

• javascript
• html
• css

Share Improve this question Follow edited Apr 24, 2018 at 16:02 Samvel Aleqsanyan 2,96444 gold badges2121 silver badges2828 bronze badges asked Apr 24, 2018 at 15:36 cryptographiccryptographic 1311 silver badge44 bronze badges 6

• the code in that codepen doesn't match your post – TKoL Commented Apr 24, 2018 at 15:39
• I edited the post, thanks – cryptographic Commented Apr 24, 2018 at 15:42
• document.getElementsByTagName("body")[0].style.opacity = "0.5"; – Animesh Kumar Commented Apr 24, 2018 at 15:46
• 1 document.getElementsByTagName() returns an HTMLCollection not a single element. You can't set the style on a collection. The error console is throwing an error because of this. – Mark Commented Apr 24, 2018 at 15:47
• 1 A better way to do this would be document.body.style.backgroundColor = rgba(0, 0, 0, 0.1); – Animesh Kumar Commented Apr 24, 2018 at 15:48

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

You can use just

document.body.style.opacity = 1;

without using getElementsByTagName("body").

getElementsByTagName will return an array of elements. In the body case will return only one. But you still need to target it directly.

You can use the next code:

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.getElementsByTagName("body")[0].style.opacity = "0.5";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementsByTagName("body")[0].style.opacity = "1";
}

This way you target that first object that was selected. Now, i dont think you want to do this. You might need to have a main div on the right side and change the opacity on that. This so you can fake a modal.

Hope this helps:)

document.getElementsByTagName("body") returns an Array, you have to choose the first index of it.

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.getElementsByTagName("body")[0].style.opacity = "0.5";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementsByTagName("body")[0].style.opacity = "1";
}

https://codepen.io/anon/pen/XqdEBM

You shouldn't use body tag for backdrop but use a div instead:

HTML

<div id="testDiv">
...
</div>
<div id="backdrop"></div>

CSS

.sidenav {
    ...
    z-index: 2;
}
...
#backdrop {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 1;
  transition: opacity 0.4s;
  background: black;
  opacity: 0;
}

JS

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.getElementById("backdrop").style.width = "100%";
  document.getElementById("backdrop").style.opacity = "0.5";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("backdrop").style.width = "0";
  document.getElementById("backdrop").style.opacity = "0";
}