Remove style attribute with JavaScript-CodePudding

i need to remove/deactivate/change to zero effect following style argument:

    #wrapper .fragment-card.aktuelles-card .image-card img:hover{
        transform:scale(3);
        box-shadow:0 4px 6px 0 #222;
    }

this has to happen with very basic Javascript, so i can not use libarys etc. The JS part will be executed at the end of the page.

Thanks for your help!

CodePudding user response：

You cannot directly deactivate a CSS rule using javascript. So you have two options:

1) The first option uses only javascript for doing it. You can modify the style attribute of the element using the setAttribute() method in order to set transform: none; box-shadow: none;. Like this:

const el = document.querySelector("#myElementId");

el.setAttribute("style", "transform: none; box-shadow: none;");

However, I don't like to use the style attribute while using css rules since I prefer to see all styles in the same css file, and it makes more difficult to mantain code, so I don't recommend to use this solution.

2) The good practice solution involves both CSS and JS. You have to reference make your css rule to a class .my-style. So then you write your css rule like this:

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

So, now you will need to use Javascript to add or remove the .my-style class whenever you need. In the case of img:hover reference you use in your original css, you can make your own js function to add the class when an img is hover, and remove the class when the pointer leaves the img. This event listener will be useful:

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

Try it here

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

img {
  width: 200px;
  height: auto;
}

<img src="https://s1.eestatic.com/2021/05/06/curiosidades/mascotas/579203536_184266041_1706x960.jpg">
<img src="https://ichef.bbci.co.uk/news/640/cpsprodpb/15665/production/_107435678_perro1.jpg">
<img src="https://dam.ngenespanol.com/wp-content/uploads/2019/06/mirada-perros-770x395.png">

CodePudding user response：

You could just create another stylesheet and add that to the end of the head element if you are sure that the offending styling is set in the head. If not you could put it at the end of the body.

This snippet adds it to the end of the head:

<!doctype html>
<html>

<head>
  <style>
    #wrapper .fragment-card.aktuelles-card .image-card img:hover {
      transform: scale(3);
      box-shadow: 0 4px 6px 0 #222;
    }
  </style>
</head>

<body>
  <div id="wrapper">
    <div >
      <div >
        <img src="https://picsum.photos/id/1015/200/300">
      </div>
    </div>
  </div>
  <script>
    const style = document.createElement('style');
    style.innerHTML = '#wrapper .fragment-card.aktuelles-card .image-card img:hover{transform: inherit!important;box-shadow: inherit!important};';
    const head = document.querySelector('head');
    head.appendChild(style);
  </script>
</body>

</html>