Tips for locating the :before element's position with Javascript

Question

Tips for locating the :before element's position with Javascript

I am currently working on an animation where I need to change the color of an element in the center once a small circle touches it. Despite trying to use the position() method, it does not work as intended because I am using a :before for animating the div. Is there another approach I could take to achieve this or any other method to determine when the small circle intersects the larger one?

https://jsfiddle.net/pwqfh7ys/5/

html

<figure class="glob-wrapper">
    <div class="goos">
        <div class="goo"></div>
        <div class="goo"></div>
        <div class="goo"></div>
        <div class="goo"></div>
        <object type="image/svg+xml" data="./img/hello.svg" class="hello"></object>
    </div>
    <div class="blobs">
        <div class="blob"></div>
    </div>
</figure>

css

javascript jquery html css

Answer 1

Answer №1

Unfortunately, pseudo elements cannot be modified using JavaScript as they are not part of the DOM. Your best option is to create a new class in your CSS with the desired styles and apply it to the element. If this is not feasible in your situation, consider using a real DOM element instead of a pseudo one.

Here is a sample code snippet that may be helpful. You can use JavaScript to set the content value using the CSS attr() function:

Javascript

$('.blob').on('click', function () {
    // Perform actions in the callback
    $(this).attr('data-before','anything'); //'anything' sets the 'content' value
});

CSS:

.blob:before {
    content: attr(data-before); // Value assigned to CSS 'content'
    /* Additional CSS styles here */
}

Answer 2

Unfortunately, pseudo elements cannot be modified using JavaScript as they are not part of the DOM. Your best option is to create a new class in your CSS with the desired styles and apply it to the element. If this is not feasible in your situation, consider using a real DOM element instead of a pseudo one.

Here is a sample code snippet that may be helpful. You can use JavaScript to set the content value using the CSS attr() function:

Javascript

$('.blob').on('click', function () {
    // Perform actions in the callback
    $(this).attr('data-before','anything'); //'anything' sets the 'content' value
});

CSS:

.blob:before {
    content: attr(data-before); // Value assigned to CSS 'content'
    /* Additional CSS styles here */
}

Tips for locating the :before element's position with Javascript

Answer №1

Similar questions

Counting records in a nested ng-repeat using AngularJS

Unable to submit multiple forms simultaneously on the same HTML page

Update and renew dropdownlist data with the help of jQuery

Issue with displaying record attribute as a text variable

Is there a method to eliminate the necessity of including the server IP address in the nginx configuration file?

Issue with optimizing in Webpack 4

Why won't the function activate on the initial click within the jQuery tabs?

Hide the dropdown menu when the user clicks anywhere else on the screen

JavaScript can be utilized to monitor outbound clicks effectively

Having trouble uploading images using ReactJS on the web platform

I am interested in implementing a logout feature using a button in PHP

Does jqgrid navgrid have an event called "on Refresh"?

Leveraging URL parameters within node.js and Express

Horizontally align the label with the Checkbox

What is the best way to determine if a character is valid for use in HTML rendering?

Is there a way to prevent an ajax call from refreshing the page?

Trigger the jQuery event only during moments of inactivity

When you click the "Select All" button in a JavaScript dialogue box, all of the checkboxes on the main page will automatically be selected

Node API is failing to insert user data into MongoDB

Struggling to pinpoint the exact element in Python/Selenium