html - Using javascript to target class - Stack Overflow

admin管理员组

文章数量:1355093

I have the following script in the head Element:

<script>
function changeOpacity(className) {

var elems = document.getElementsByClassName(className);
var index = 0, length = elems.length;
for ( ; index < length; index++) {
    elems[index].style.transition = "opacity 0.3s linear 0s";
    elems[index].style.opacity = 0.8;
    }
}
</script>

<style>
.red_box {width:100px;height:100px;opacity:1;background:red}
</style>

and the following structure in the body Element:

<div onmouseover="changeOpacity('.red_box')">Click to fade red boxes</div>

<div class="red_box">Box 1</div>
<div class="red_box">Box 2</div>
<div class="red_box">Box 3</div>

I'm trying to achieve the following: when the user clicks on the 'Click to fade red boxes' message, the function should make each div with the class: 'red_box' to turn transparent. I would love some pointers (not Jquery please), Thanks!

I have the following script in the head Element:

<script>
function changeOpacity(className) {

var elems = document.getElementsByClassName(className);
var index = 0, length = elems.length;
for ( ; index < length; index++) {
    elems[index].style.transition = "opacity 0.3s linear 0s";
    elems[index].style.opacity = 0.8;
    }
}
</script>

<style>
.red_box {width:100px;height:100px;opacity:1;background:red}
</style>

and the following structure in the body Element:

<div onmouseover="changeOpacity('.red_box')">Click to fade red boxes</div>

<div class="red_box">Box 1</div>
<div class="red_box">Box 2</div>
<div class="red_box">Box 3</div>

I'm trying to achieve the following: when the user clicks on the 'Click to fade red boxes' message, the function should make each div with the class: 'red_box' to turn transparent. I would love some pointers (not Jquery please), Thanks!

• javascript
• html

Share Improve this question Follow edited Apr 5, 2016 at 4:54 user2840467 asked Apr 4, 2016 at 21:16 user2840467user2840467 90333 gold badges1313 silver badges2020 bronze badges 2

• 1 The opacity is set to 1 in the CSS, and then your JavaScript code also sets it to 1. Did you mean to set it to 0? – Pointy Commented Apr 4, 2016 at 21:18
• Oops! Thanks Pointy - sorry for confusion. Yes, the function should have the opacity at 0.8 I have edited my question now – user2840467 Commented Apr 5, 2016 at 4:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Remove the dot in the class name when calling the function:

onmouseover="changeOpacity('red_box')"

document.getElementsByClassName(className) takes the class name as a string. If you want to use a CSS selector, you can use document.querySelectorAll('.red_box') instead.

As pointed out by @pointy in his ment, you also set the opacity to the same as the initial value. Probably want to change that to something between 0 and 0.9, depending on the level of transparency you want.

You had set the opacity to the same in the css and the function, and also you needed to remove the dot in onmouseover="changeOpacity('red_box')"

Change your js function and html to be something like the below and it will work nicely.

function changeOpacity(className) {

  var elems = document.getElementsByClassName(className);
  console.log(elems)
  var index = 0,
    length = elems.length;
  for (; index < length; index++) {
    elems[index].style.transition = "opacity 0.3s linear 0s";
    elems[index].style.opacity = 0.5;
  }
}

.red_box {
  width: 100px;
  height: 100px;
  opacity: 1;
  background: red
}

<div onmouseover="changeOpacity('red_box')">Click to fade red boxes</div>

<div class="red_box">Box 1</div>
<div class="red_box">Box 2</div>
<div class="red_box">Box 3</div>

本文标签： htmlUsing javascript to target classStack Overflow