Get class name from element

A nice little script that will return the first class applied to an element. It's part of our internal slider code, but has lots of uses when other js libraries are involved.

 <script> 

function getFirstWord(element) {
    // Get the class name of the element
    let str = element.className;
    
    // Trim any leading or trailing spaces from the string
    str = str.trim();
    
    // Find the first space in the string
    const spaceIndex = str.indexOf(' ');
    
    if (spaceIndex === -1) {
        // If there are no spaces in the string, return the whole string
        return str;
    }
    
    // If there is a space in the string, return the substring before the space
    return str.substring(0, spaceIndex);
}


</script>

Similar Code Snippets

Calculate sizes in CSS

CSS's calc() function allows you to perform calculations to determine CSS property values. It's incredibly useful for responsive design, such as when you need to adjust sizes dynamically. For example, if you want a div to be 100% of the viewport width minus a certain margin, you can use calc():

View Snippet

Fade non-hovered links

A fun animation where hovering over links will fade out all the items except the hovered item.

View Snippet

Balance text wrapping

‍‍Headings are crucial for grabbing attention and conveying key messages. However, unbalanced text lines can make headings less impactful. The text-wrap: balance; property helps distribute text more evenly across lines, reducing the occurrence of "widows" - a single word or short line at the end of a paragraph:

View Snippet

View All Snippets