Utilizing DOMStringMap data to populate CSS URLs

I am attempting to create a universal CSS modification for a webpage element that resembles:

<button data-action="link" class="cardImageContainer coveredImage cardContent itemAction lazy lazy-image-fadein-fast" data-blurhash="long string that I am unsure if it is identifying or not" aria-label="sample_video" style="background-image: url("http://localhost:8096/Items/7215c9b47ed950ddeb42219e4b4091a1/Images/Primary?);"></button>

The program allows for CSS customization, and the following code works as long as I manually input that long string (dataset:id) in the URL section.

.card:hover .cardImageContainer,
.card.show-animation:focus .cardImageContainer {
    background-image: url("/Items/   that long id  /Images/Logo?") !important;

The long ID can be found in the inspect element under dataset: DOMStringMap id. Is there a way to automatically incorporate this into the hover background image URL?

.card:hover .cardImageContainer,
.card.show-animation:focus .cardImageContainer {
    background-image: url("/Items/dataset:id/Images/Logo?") !important;
javascripthtmlcssdomjellyfin

Answer №1

CSS is unable to join together the various components of the URL needed for the url() function, making it impossible to achieve this using CSS alone. (Learn more)

You can try using the following JavaScript solution:

let blurhash = document.querySelector('.cardImageContainer').dataset.blurhash;
let e = document.querySelector('.cardImageContainer');
e.style.background = 'url("/Items/' + blurhash + '/Images/Logo?") no-repeat scroll 0 0 transparent';
console.log(e.style.backgroundImage);

This code snippet demonstrates how to extract the value of the data-blurhash attribute from the HTML and combine it with other data to set the background image dynamically.

You may need to adjust the code further depending on the complexity of your webpage in order to target specific elements and handle multiple instances per page effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align the h2 header vertically within a div container

So, here's the HTML structure that I'm working with: <div class="category"> <div class="container bottom"> <h2>Name1</h2> </div> <div class="container top"> <h2>Name2</h2&g ...

htmlcssvertical-alignment

Leveraging onClick in combination with React's AutoBind

Just started learning React, so please point me towards documentation if I missed anything. I'm attempting to initiate an Ajax call using the onClick method following a tutorial on React. See the code snippet below. doSomething: function() { // ...

javascriptajaxreactjs

When calling UIComponent.getRouterFor, a TypeScript error is displayed indicating the unsafe return of a value typed as 'any'

I have recently integrated TypeScript into my SAPUI5 project and am encountering issues with the ESLint messages related to types. Consider this simple example: In this snippet of code, I am getting an error message saying "Unsafe return of an any typed ...

javascripttypescriptvisual-studio-codesapui5

sole active component present

In my redux store, I have an array called rooms that is fetched from the server. In my component, I fetch this array from the store, map it, and display elements with the value of room['foo']. However, I am facing a problem where when a user clic ...

javascriptreactjsredux

Chat application using Node.js without the need for Socket.IO

Recently delving into the world of Node.js, I stumbled upon the fs.watchFile() method. It got me thinking - could a chat website be effectively constructed using this method (along with fs.writeFile()) in comparison to Socket.IO? While Socket.IO is reliabl ...

javascriptjsonnode.jssocket.io

Can you provide guidance on utilizing the Login Event within the Electron Framework?

I need some assistance in understanding the functionality of the Event: 'login' feature within the Electron Framework. Is this similar to the Password Autofill/Remember Password feature typically found in web browsers? I'm interested in util ...

javascriptnode.jschromiumelectron

Is it the right time to dive into HTML5 & CSS3?

The excitement around HTML5 and CSS3 is hard to ignore. But when is the right time to start incorporating them into our projects? How close are we to fully utilizing their capabilities? Update: I'm not interested in following the principles of: Grac ...

htmlcss

Utilize CSS for Sticky Headers to Create Full Page Scrollbars for Table Control

Here is a code sandbox showcasing the use of Material UI's Table within a Paper component with a sticky header: https://codesandbox.io/s/2n40y I am looking to have the scrollbars appear at the edges of the browser page, bottom and right, while still ...

csshtml-tablematerial-uisticky

Do not allow numbers in the Vietnamese character set in the HTML pattern

I am looking for a RegEx pattern to validate the name field without allowing any numbers. Currently, my pattern allows numbers which is not what I want. [a-zA-Z'-ŠšŽžÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÑÒÓÔÕÖØÙÚÛÜÝŸÞàáâãäåæçèé ...

regexhtmlpattern-matching

The image must be able to fit within the div container without distorting its proportions

Recently, I created a slider that functions flawlessly. However, I am struggling to make the image fit inside the div without distorting its proportions. I've tried various methods but haven't been able to achieve the desired result. Could you p ...

jquerycssslider

Conditional statement that includes Node.js scheduling function

I am currently working on a Node.js project and I need to execute a specific portion of conditional code after waiting for five minutes since the last piece of code executed. This action should only happen once, not on a daily basis or any other frequency. ...

javascriptnode.jscron

What is the best way to incorporate a for loop in order to create animations with anime.js?

I am currently working on implementing a for loop to create a page loader using JQuery along with the animation framework anime.js var testimonialElements = $(".loader-animation"); for(var i=0; i < Elements.length; i++){ var element = ...

javascriptjqueryanime.js

Can we selectively execute certain tests in Cypress using support/index.js?

I need to selectively run certain tests from a pool of 50 test files located in the integration folder. Specifically, I only want 10 of them to execute. In an attempt to achieve this, I am trying to configure the selection process within the support/index. ...

javascriptnpmcypressconfigtest-runner

Struggling with displaying Firebase data in React

I am facing an issue with rendering data fetched from Firebase onto the screen. The problem arises when I attempt to call the function that retrieves data from the database inside the componentDidMount() lifecycle method. Surprisingly, the function does no ...

javascriptreactjsrender

How can I apply concatMap in Angular?

Can you please guide me on how to effectively utilize concatMap with getPrices() and getDetails()? export class HistoricalPricesComponent implements OnInit, OnDestroy { private unsubscribe$ = new Subject < void > (); infoTitle ...

javascriptangulartypescript

Issue: Infinite loops detected in AJAX functions

I am using $.get methods in the following code snippet: $.get("/url" , function(z) { var a = $(z).find("span"); for (var i = 0 ; i<a.length; i++){ var v = $(a).eq(i).children("strong:first").text(); alert(v); } }); However, the s ...

javascriptjqueryajax

PHP receive apostrophe from $_GET array

Similar Question: “slash before every quote” issue Hello there, I am currently attempting to utilize $_GET in order to transmit the contents of a text box to another php file. However, whenever I include single (') or double (") quote ...

phphtml

Developing custom functions in ejs for individual posts

In my blog, I have a feed where all users' posts are displayed dynamically using ejs. There is a comment section that remains hidden until the user clicks the comments button. Below is a snippet of my ejs file: <% posts.forEach(post => { %> ...

javascriptnode.jsexpressmongooseejs

What is the most efficient method for storing and retrieving numerous DOM elements as JSON using the FileSystem (fs) Module in Node.js?

Is there a way to efficiently save dynamically added DOM elements, such as draggable DIVs, to a file and then reload them later on? I am looking for the most organized approach to achieve this. ...

javascriptjsonnode.jsjquery-uidom

validating if Object may be either 'null' or 'undefined'

In the code snippet below, I am attempting to verify whether hostel.country.address is null: return hostel.country.address && hostel.country.address.internalEmployeeIdentifier !== null || hostel.country.address.exter ...

javascriptnode.jstypescript