Remove "content" CSS property "onclick" button for the entire website

Question

function myFunction() {
  document.getElementById('img');
  const element = document.styleSheets[0].cssRules[0].style.removeProperty('content');
}

img {
  content: url("https://static.vecteezy.com/system/resources/previews/005/476/277/original/under-18-forbidden-round-icon-sign-illustration-eighteen-or-older-persons-adult-content-18-plus-only-rating-isolated-on-white-background-free-vector.jpg");
  max-width: 100%;
  height: auto;
}

<button onclick="myFunction()">Show pics</button>

<img src="https://m.media-amazon.com/images/I/81K2hJBAduL.png">

The point is that after clicking on the "delete" button, the "content" property for the entire website.

Hello. Can you please further detail your request? What you're requesting is not very clear. — underflow, May 28 '23 at 08:28
There is no "delete button" in your whole code. Wdym by delete button? Moreover, can you continue the last sentence; what happens to the "content" property? — underflow, May 28 '23 at 08:30
The point is that after clicking the "Button" the original pictures appear, which are hidden using CSS and the "content" property. I want this button to display all photos on the page, not just within a given div — Rafal, May 28 '23 at 12:59

Levi · Accepted Answer · 2023-05-30T20:07:29.560

All you really need is to set a class on the body, this will affect every image on the page:

function myFunction() {
  document.body.classList.add('permitted');
  setCookie('permitted-images', '1');
}

document.addEventListener('DOMContentLoaded', function(){
  if( getCookie('permitted-images') == '1' ){
    document.body.classList.add('permitted');
  }
});


/** functions for handling cookies **/
function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

body:not(.permitted) img {
  content: url("https://static.vecteezy.com/system/resources/previews/005/476/277/original/under-18-forbidden-round-icon-sign-illustration-eighteen-or-older-persons-adult-content-18-plus-only-rating-isolated-on-white-background-free-vector.jpg");
  max-width: 100%;
  height: auto;
}

<button onclick="myFunction()">Show pics</button>
<img src="https://m.media-amazon.com/images/I/81K2hJBAduL.png">

<img src="https://cdn.pixabay.com/photo/2023/04/02/12/40/mistletoe-7894574_1280.jpg">

<img src="https://cdn.pixabay.com/photo/2015/04/23/21/59/tree-736877_1280.jpg">

Edit: I added code to make the class persist across page loads, using cookies.

Note: Cookies are restricted in the code snippets on StackOverflow, so it will not work when testing here. But I have tested it locally, and it does work.

The default expiration of cookies is when the session ends; meaning the cookies are deleted when the website is closed. To keep the cookie for longer, add number of days to setCookie: setCookie('permitted-images', '1', 30); (this will keep the cookie for 30 days).

Code for handling cookies in javascript found here: stackoverflow.com/a/24103596/1678383

The point is that after clicking the "Button" the original pictures appear, which are hidden using CSS and the "content" property. I want this button to display all photos on the page, not just within a given div — Rafal, May 28 '23 at 12:59
yes, that is why I've used the body tag. the whole page is within the body-tag so this will affect all images. but this only works if you can set this class to the body — Levi, May 28 '23 at 13:55
I've changed the code alittle to avoid needing to preset a class on the body-tag, now it is easier to implement. I also added more images to show it works on multiple images. @Rafal — Levi, May 28 '23 at 14:41
It works as it should. But how to make it so that you don't have to click every time you enter a different subpage? — Rafal, May 30 '23 at 15:39
for this you need cookies or storage, I'll update the code later — Levi, May 30 '23 at 17:03
@Rafal I have updated the code to use cookies for remembering if images have been permitted. When the page is loaded, the code sets the class on body if the cookie is set. — Levi, May 30 '23 at 20:09

score 0 · Answer 2 · answered May 28 '23 at 07:27

@Rafal You're only selecting the first instance of the stylesheet. It would help if you iterated through the stylesheet to remove all instances of the "content" property.

For example:

<script>
function myFunction() {
  const styleSheets = document.styleSheets;
  for (let i = 0; i < styleSheets.length; i++) {
    const cssRules = styleSheets[i].cssRules;
    for (let j = 0; j < cssRules.length; j++) {
      const rule = cssRules[j];
      if (rule.style && rule.style.removeProperty) {
        rule.style.removeProperty('content');
      }
    }
  }
}

Remove "content" CSS property "onclick" button for the entire website

2 Answers2