Is it achievable to selectively target a particular class without resorting to utilizing an ID within DOM manipulation?

Question

Is it achievable to selectively target a particular class without resorting to utilizing an ID within DOM manipulation?

Is there a way to apply a function to a specific class without requiring an id? For example, in CSS hover effects, where multiple elements share the same class but only the one being hovered over is affected.

 
function toggleHeight(elementId, arrowId) {
    var x = document.getElementById(elementId);
    
    if (x.style.height === "60px") {
        x.style.height = "1000px";
        document.getElementById(arrowId).src = "picnig/arrow2.png";
    } else {
        x.style.height = "60px";
        document.getElementById(arrowId).src = "picnig/arrow1.png";
    }
}

function exp1() {
    toggleHeight("port1", "ba1");
}

function exp2() {
    toggleHeight("port2", "ba2");
}

function exp3() {
    toggleHeight("port3", "ba3");
}

javascript css

Answer 1

Answer №1

To achieve this, typically a key-value pair is stored in the parent scope or in a `WeakMap`, an event listener is added to the parent container, and `event.target` or `event.x, event.clientX, event.y, event.clientY` are passed to `elementFromPoint` to identify the hovered element. Then, the `classList` property or `getAttribute("class", ...)` is inspected to confirm if it meets the criteria.

However, for a CSS-based solution, you can set a property on `:hover` and check its value. It's important to throttle this function to avoid excessive calls to `getComputedStyle`, which can be resource-intensive.

PS: Assign a common class to all 'ba' elements and define the CSS hover property as shown below:

const pool = document.getElementsByClassName("someclass");
function findTheHoveredElement() {
  return Array.from(pool).filter(d => +getComputedStyle(d).getPropertyValue("--x") === 1)
}

setInterval(function(){
  const selection = findTheHoveredElement();
  if(selection.length){
    console.log(`You are hovering on ${selection[0].textContent}`)
  }
}, 1000)

div.someclass {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: magenta;
}

div.someclass:hover {
--x: 1;
cursor: pointer;
}

<div class="someclass">1</div>
<div class="someclass">2</div>
<div class="someclass">3</div>

Answer 2

To achieve this, typically a key-value pair is stored in the parent scope or in a `WeakMap`, an event listener is added to the parent container, and `event.target` or `event.x, event.clientX, event.y, event.clientY` are passed to `elementFromPoint` to identify the hovered element. Then, the `classList` property or `getAttribute("class", ...)` is inspected to confirm if it meets the criteria.

However, for a CSS-based solution, you can set a property on `:hover` and check its value. It's important to throttle this function to avoid excessive calls to `getComputedStyle`, which can be resource-intensive.

PS: Assign a common class to all 'ba' elements and define the CSS hover property as shown below:

const pool = document.getElementsByClassName("someclass");
function findTheHoveredElement() {
  return Array.from(pool).filter(d => +getComputedStyle(d).getPropertyValue("--x") === 1)
}

setInterval(function(){
  const selection = findTheHoveredElement();
  if(selection.length){
    console.log(`You are hovering on ${selection[0].textContent}`)
  }
}, 1000)

div.someclass {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: magenta;
}

div.someclass:hover {
--x: 1;
cursor: pointer;
}

<div class="someclass">1</div>
<div class="someclass">2</div>
<div class="someclass">3</div>

Is it achievable to selectively target a particular class without resorting to utilizing an ID within DOM manipulation?

Answer №1

Similar questions

Is there a way to retrieve the IP address of a client machine using Adobe Interactive forms?

Transforming Image Annotation from Angular 1 to Angular 4: Overcoming Conversion Challenges and Comparing Equivalents from 1.x to 4

Minimize or conceal iframe

Retrieving information from Prismic API using React Hooks

Handsontable: How to update renderers when a row is deleted

Arranging a JSON array based on the numerical value within an object

Using window.location.replace() for redirection after AJAX call succeeds

How can we display the Recent Updates from our LinkedIn profile on our website using iframe or javascript?

Creating a slider directly under the header in an Ionic 3 application without any gaps

Sometimes, Express may return the message "not found" on and off

Transitioning the style code from inline to the head of the document disrupts the straightforward JavaScript intended to

Troubleshooting Issue with Mongoose Virtual Field Population

Focusing on a specific input category inside a div container

Equalize the color of overlapping background events with non-overlapping background events in fullcalendar

Missing arrow icon in Bootstrap 4 navbar menu and sub menu

The array containing JSON objects enclosed within curly braces is causing a syntax error

Display or conceal elements in Angular based on multiple conditions

Utilizing GraphicsMagick with Node.js to Extract Page Frames from Multi-Page TIF Files

Tips for maintaining the size of an object while resizing a window

Having trouble with JavaScript canvas drawImage function not functioning correctly