Question 51778 in Javascript Question posted in
A very good W3school tutorial can be found here.

Find and replace all class names dynamically on website – Javascript

I am browsing a forum as a guest which has embedded pictures. By default, the website blurs the pictures for non-logged in users.

Looking at the HTML I have found that I can change the following span’s class to be empty:

<span class="attachmentPreview">

to

<span class="">

in order to lift the pictures blur.

I have very basic knowledge of JavaScript, but enough to load my first extensions into Firefox and ensure that it only runs on a specific URL (the forum in this case).

My questions:

  1. How do I interact with the specific element (span class="attachmentPreview"?) in order to modify it to update to ?

  2. It needs to happen on the go, as the forum dynamically blurs the picture as the user scrolls down between the posts: How do I ensure my script continuously checks for any new pictures on the website?

Many thanks

I am able to find the elements with document.getElementsByClassName("attachmentPreview")

Tags:

2

Answers


  1. 0

    Just inject a style sheet that overrides the rule or add an extension that allows you to add custom styles to a site.

    document.head.insertAdjacentHTML("beforeend", `<style>.attachmentPreview { filter: none !important; }</style>`)
    .attachmentPreview { filter: blur(1.5rem); }
    <span class="attachmentPreview">
<img src="http://placekitten.com/200/300" />
</span>
    Login or Signup to reply.
  2. 0

    Here is an example using MutationObserver:

    const main = () => {
  // When the page has been scrolled 100%
  // See: https://stackoverflow.com/a/75266945/1762224
  window.addEventListener('scrollend', loadImage);

  // Remove pre-loaded
  document.querySelectorAll('.attachmentPreview').forEach(removeBlur);

  // Remove dynamic
  observe('.attachmentPreview', removeBlur, document.body);
};

// Source: https://stackoverflow.com/a/65585776/1762224
const observe = (selector, callback, targetNode = document.body) =>
  new MutationObserver(mutations => [...mutations]
    .flatMap((mutation) => [...mutation.addedNodes])
    .filter((node) => node.matches && node.matches(selector))
    .forEach(callback))
  .observe(targetNode, { childList: true, subtree: true });

const loadImage = () => {
  const span = document.createElement('span');
  const img = document.createElement('img');
  img.src = 'http://placekitten.com/260/120';
  span.classList.add('attachmentPreview');
  span.append(img);
  document.body.append(span);
};

// Timeout is just for demonstration.
const removeBlur = (span) => {
  console.log('Removing blur in 1 second...');
  setTimeout(() => {
    span.classList.remove('attachmentPreview');
  }, 1000);
};

main();
    body {
  text-align: center;
}

body>span {
  display: block;
}

.attachmentPreview {
  filter: blur(0.667rem);
}
    <script src="https://cdn.jsdelivr.net/gh/argyleink/scrollyfills/dist/scrollyfills.umd.js"></script>
<span class="attachmentPreview">
  <img src="http://placekitten.com/260/120" />
</span>
<span class="attachmentPreview">
  <img src="http://placekitten.com/260/120" />
</span>
<span class="attachmentPreview">
  <img src="http://placekitten.com/260/120" />
</span>
<span class="attachmentPreview">
  <img src="http://placekitten.com/260/120" />
</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search