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: <script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script> — user1238784
– user1238784, Commented May 12, 2018 at 16:50

Asons · Accepted Answer · 2018-05-13 07:47:27Z

2

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>

edited May 13, 2018 at 7:47

answered May 12, 2018 at 16:49

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1238784 Over a year ago

Yes it worked now...Glad to know I can mix javascript with jquery also.

Asons Over a year ago

@user1238784 Of course you can...and FYI, jQuery is built with javascript

Nandita Sharma · Accepted Answer · 2018-05-12 16:50:27Z

1

You are not calling the function using ()

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

answered May 12, 2018 at 16:50

Nandita Sharma

13.4k2 gold badges25 silver badges36 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered May 12, 2018 at 17:12

lewis

234 bronze badges

Collectives™ on Stack Overflow

Change the style of a div with javascript and jquery

3 Answers 3

2 Comments

Comments

Another cleaner way without mixing the JavaScript with the Html

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Another cleaner way without mixing the JavaScript with the Html

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related