DEV Community

Kiran Raj R
Kiran Raj R

Posted on

Useful JavaScript Code Snippets

Calculate mouse position with respect to an element.

Element.getBoundingClientRect() method returns a DOMRect object. DOMRect object represents a smallest rectangle which contains the entire element including its padding and border-width, which also contain information about size of the element like the width and height and position of the element relative to the viewport.

To calculate the position of mouse click event with respect to an element on which the event occur, first we need the position of the click event with respect to the main element(here it is the document). e.clientX and e.clientY will help you to get that value, it will return the x axis and y axis value with respect to the top left corner of the main element. Secondly we need to get the position of the element with respect to the main element, left and top properties of the getBoundingClientRect() method will help to get that value. Substracting the left/top values from clientX/clientY values will give the position of mouse click with respect to the element.

element.addEventListener('mousedown', function(e) {
    const target = e.target;
    const rectVal = target.getBoundingClientRect();
    const x = e.clientX - rectVal.left;
    const y = e.clientY - rectVal.top;
});
Enter fullscreen mode Exit fullscreen mode

Get the position of an element relative to the document


const rect = ele.getBoundingClientRect();
// Here ScrollLeft / ScrollTop measures the width and height of the document even if some part of the document is scrolled out. 
const top = rect.top + document.body.scrollTop;
const left = rect.left + document.body.scrollLeft;
Enter fullscreen mode Exit fullscreen mode

Toggle password show function

Input type "password" make the entered text hidden by replacing each letter with an asterisk ("*") or a dot ("•"). If we change the type of the input into text we will be able to see the actual text. This approach is used to make the password text visible, we use a button, when clicked, will checks the attribute of the input field. If it is "password" we will set it to "text" and the password will be visible, when button is clicked again we will set the type back to password.

html
<input type="password" classs="pass" />
<button class="tbtn">Toggle</button>

JavaScript
const passInput = document.querySelector('.pass');
const toggleBtn = document.querySelector('.tbtn');

toggleBtn.addEventListener('click', function() {
    const inputType = passInput.getAttribute('type');
    if(inputType === 'password'){
        passInput.setAttribute('type', 'text')
    else if(inputType === 'text'){
        passInput.setAttribute('type', 'password')
    }
});
Enter fullscreen mode Exit fullscreen mode

Scroll to top of the page

ScrollTo(x,y) method cause the web page to scroll to the value specified by the method with respect to the document's top left corner. i.e. window.scrollTo(0, 0), cause the page to scroll to a position which is 0px from left and 0px from top relative to the document's top left corner.

window.scrollTo(0, 0);
Enter fullscreen mode Exit fullscreen mode

Toggle visibility of an element

We can remove an element from the DOM just by setting the CSS display property of the element into "none", we can create a toggle to set the display value from none to block or block to none using the conditional operator in JavaScript. Conditional operator takes three operands: a condition followed by a question mark, then an expression to execute if the condition is truth followed by a colon and then an expression to execute if the condition is false.

const visibility = function(e) {
    const displayType = e.style.display;
    e.style.display = displayType === 'none' ? 'block' : 'none';
};
Enter fullscreen mode Exit fullscreen mode

Detecting Dark mode in browser

First we detect if matchMedia object exists in the browser, if not that means the browser does not support dark mode. Next we need to check the current color scheme, window.matchMedia('(prefers-color-scheme: dark)').matches will return true if dark mode is enabled.

const isDarkMode = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)')
.matches;
Enter fullscreen mode Exit fullscreen mode

Feedback welcomed, Thanks in advance.

Top comments (3)

Collapse
 
jvdl profile image
John van der Loo

For toggling elements in the DOM my go to technique is to toggle a CSS class with el.classList.toggle('hidden');
That style rule then has only a display: none; in it.

Collapse
 
webreflection profile image
Andrea Giammarchi

event.layerX and event.layerY, for relative coordinates, are also an option, implemented in pretty much all modern browsers (it's some sort of long time available de-facto standard).

Collapse
 
uzlopak profile image
Uzlopak

The dark mode snippet is interesting. The rest is basic stuff which was relevant 15 years ago.