Change the style of a div with javascript and jquery

Question

In my source I have: In the style section:

<head>
        <style>
               .grayableDiv{background-color:transparent}
        </style>
    </head>

<script>
            function DoGrayEffectIn()
            {
                $('.grayableDiv').css('background-color', 'Gray');

            }
            function DoGrayEffectOut()
            {
                $('.grayableDiv').css('background-color', 'Transparent'); 
            }
       </script>

<div class="grayableDiv" onmouseover ="DoGrayEffectIn" onmouseout="DoGrayEffectOut">

But I cannot see the effect when going with the mouse over the div. What am I doing wrong. Is it possible to mix jquery and javascript in this way?

I forgot to say I do have jquery in my declarations: – user1238784 May 12 '18 at 16:50 — user1238784, May 12 '18 at 16:50

Asons · Accepted Answer · 2018-05-13T07:47:27.713

You need to add parenthesis () to your event handlers so their functions gets called.

Should be onmouseover ="DoGrayEffectIn()", not onmouseover ="DoGrayEffectIn"

Stack snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    .grayableDiv {
      background-color: transparent
    }
  </style>
</head>

<script>
  function DoGrayEffectIn() {
    $('.grayableDiv').css('background-color', 'Gray');
  }

  function DoGrayEffectOut() {
    $('.grayableDiv').css('background-color', 'Transparent');
  }
</script>

<div class="grayableDiv" onmouseover="DoGrayEffectIn()" onmouseout="DoGrayEffectOut()">div</div>

A better practice for attaching JavaScript to the front-end of a website is to separate it from the markup, often referred as unobtrusive javascript.

Stack snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    .grayableDiv {
      background-color: transparent
    }
  </style>
</head>

<script>
  $(document).ready(function() {
    $('.grayableDiv')
      .mouseover(function() {
        $(this).css('background-color', 'Gray');
    }).mouseout(function() {
        $(this).css('background-color', 'Transparent');
    });
  });
</script>

<div class="grayableDiv">div</div>

Yes it worked now...Glad to know I can mix javascript with jquery also. — user1238784, May 12 '18 at 16:54
@user1238784 Of course you can...and FYI, jQuery is built with javascript — Asons, May 12 '18 at 16:55

score 1 · Answer 2 · answered May 12 '18 at 16:50

1

You are not calling the function using ()

<div class="grayableDiv" onmouseover ="DoGrayEffectIn()" onmouseout="DoGrayEffectOut()">

answered May 12 '18 at 16:50

Nandita Sharma

13,287
2
22
35

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

Another cleaner way without mixing the JavaScript with the Html

<script>
$(document).ready(function(){
    $(".grayableDiv").mouseover(function(){
        $(".grayableDiv").css("background-color", "gray");
    });
    $(".grayableDiv").mouseout(function(){
        $(".grayableDiv").css("background-color", "transparent");
    });
});
</script>

edited Jun 20 '20 at 09:12

Community

1
1

answered May 12 '18 at 17:12

lewis

23
4

Change the style of a div with javascript and jquery

3 Answers3

Another cleaner way without mixing the JavaScript with the Html