CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mijok
mijok

Reputation: 201

Apply some style to specific element with Javascript or CSS

I have a very strange situation where I have style that apply grayscale to the whole HTML document. That’s all ok but now my images obvious have grayscale filter which I don’t want.  What am trying to achieve is that images don’t have that grayscale filter but whole HTML needs to stay as it is. 

<!DOCTYPE html>

<html lang="en" style="background-color:#000!important;;;;color:#fff!important;border-color:#fff!important;opacity:1!important;;;;-webkit-filter:grayscale(1);-moz-filter:grayscale(1);-ms-filter:grayscale(1);filter:grayscale(1);;">
<head>

    </head>
    <body tyle="webkit-filter:grayscale(1);" >
      <p style="background-color:#000!important;;;;color:#fff!important;border-color:#fff!important;opacity:1!important;;">
      This is text
      </p>
      <img class="img-fluid" src="https://blackrockdigital.github.io/startbootstrap-agency/img/portfolio/01-thumbnail.jpg" >  

    </body>
</html>

Also here is jsfiddle link: https://jsfiddle.net/y2xamkwe/

Can I do it with Javascript or with CSS?.

My CSS is like this

html .img-fluid {
    filter:none!important
}

Upvotes: 2

Views: 80

Answers (4)

CeesJanNolen
CeesJanNolen

Reputation: 76

When using the following code to apply the style to all the items in the body element except the exclude classes will fix this problem for you.

<style>
    body :not(.exclude) {
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -ms-filter: grayscale(1);
        filter: grayscale(1);
</style>

Then you can add an extra class to your image tag like so: 

<img class="img-fluid exclude" src="https://blackrockdigital.github.io/startbootstrap-agency/img/portfolio/01-thumbnail.jpg"/>

I hope this helps solving your problem.

Upvotes: 4

Armedin Kuka
Armedin Kuka

Reputation: 675

I would recommend you to remove all the inline style, especially on the html tag. Instead, you can use make use of :after and :before to make it more efficient. Here is an example of what you might want to do. 

body:before {
  content: '';
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -ms-filter: grayscale(1);
  filter: grayscale(1);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;

}

Upvotes: 1

gulyasfeccferenc
gulyasfeccferenc

Reputation: 354

One approach could be (apart from not using !important everywhere, it is just not good practice) is to list all your element you want to grayscale, either by use a CSS targeting all your element needs be grayed out, or create a CSS class containing this filter option. As you applied the filter on HTML and BODY, you can't make the related images not filtered as they contained by the forementioned tags, meaning they will be filtered as well.

Upvotes: 1

Enrico Cortinovis
Enrico Cortinovis

Reputation: 861

You can do this using the class attribute. To understand how it works, here is an example. You will need CSS to do it:

<html>
   <head>
   <style>
   h1.notimportant {
       color: blue;
   }

   p.important {
       color: green;
   }
   </style>
   </head>
   <body>

   <h1 class="notimportant">Header 1</h1>
   <p>Just a normal paragraph</p>
   <p class="important">This paragraph is more important</p>

   </body>
</html>

Hope this helped!

Upvotes: 1

Related Questions