Change the style of a div with javascript and jquery

jquery change css class
jquery change style
jquery add css class
jquery remove style
javascript change css class
dynamically change css class with javascript
jquery css display
jquery style display

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?

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>

.css(), jQuery Change CSS Dynamically – It's Easy! Change Specific CSS Element. It's really easy to change CSS with jQuery this is the format of the . Nest Your jQuery CSS Commands. It is handy to know jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. Remove CSS Styles. Extending Existing Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

You are not calling the function using ()

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

jQuery Change CSS Dynamically, Toggle class. With jQuery, it is easy to manipulate the style of elements. Exercise: Use a jQuery method to add the "important" class to a <p> element. $("p​"). (" To replace innerHTML of a div in jQuery, use the html() or text() method.ExampleYou can try to run the following code to learn how to replace innerHTML of a div

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>

jQuery css() Method, To change the style of an HTML element, use this syntax: document.​getElementById(id).style.property = new style. The following example changes the style of a  Sure, you could add a bunch of identical jQuery objects, each changing just one property at a time, but this is making several, unnecessary calls to the DOM and is a lot of repeated code. Instead, you can pass the .css() method a Javascript object that contains the properties and values as key/value pairs.

jQuery Get and Set CSS Classes, Return the specified CSS property value of the FIRST matched element. Set CSS property and value using a function. Using a function to change a CSS property  Changing your website styles dynamically is taking over the web! In this post I will explain how to do some simple yet effective CSS tricks using jQuery.

JavaScript DOM CSS, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  JavaScript Reference HTML DOM Reference jQuery The HTML DOM allows JavaScript to change the style of HTML elements. Changing HTML Style. To change the style of an

jQuery attr() Method, How to Create Dark/Light Mode for Website using JavaScript/jQuery? ES6 | Promises · JavaScript | Function binding · How to Sort/Order keys in JavaScript objects  As of jQuery 1.4, the change event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers. Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.

Comments
  • I forgot to say I do have jquery in my declarations: <script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
  • Yes it worked now...Glad to know I can mix javascript with jquery also.
  • @user1238784 Of course you can...and FYI, jQuery is built with javascript