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

When coding on Github pages, the behavior of code blocks can vary depending on whether

I am interested in obtaining the offline version, which can be seen here: On the other hand, the online version has a different appearance: If you want to view the incorrect version, click on this direct link to visit the blog. A notable issue is the da ...

cssjekyllgithub-pages

PHP page Not Refreshing Properly Without Ajax

I am in need of assistance. Could someone please provide me with a code that has been thoroughly reviewed and tested for errors to address my issue? The program, 22.php, consists of a form. The desired functionality is for the user to enter information and ...

javascriptphpjqueryhtmlajax

Exploring the possibilities of integrating JSONP with Framework7

I've been attempting to retrieve images from the Instagram public API using ajax and JSONP: var target = https://www.instagram.com/p/BP3Wu_EDXsjdT5Llz13jFv2UeS0Vw0OTxrztmo0/?__a=1?callback=?'; $$.ajax({ ty ...

javascriptjqueryajaxinstagram-apihtml-framework-7

What could be causing my JavaScript function to produce repeated letters with just one key press?

After implementing a code that generates different variables based on the 'truth' variable, I encountered an issue. Everything works flawlessly when 'truth' is set to "name," but as soon as I switch it to "email," any keystroke results ...

javascript

identify when the React component has reached the bottom of the element by reading the

Is there a way to access the scroll handler's event without being able to access offsetTop, scrollTop, etc? class App extends React.Component { handleScroll = e => { console.log(e.target.scrollTop); }; componentDidMo ...

javascripthtmlreactjsecmascript-6

Is it a guarantee that a function called in the head section of a JavaScript for-of loop will only be executed once?

In both Firefox and Chrome, I tested the code snippet below: function test() { console.log("***") return [1,2,3] } for (const t of test()) { console.log(t) } After running this code, I noticed that the test function was only called once. T ...

javascriptfor-of-loop

Bringing back a Mongoose Aggregate Method to be Utilized in Angular

I'm having trouble returning an aggregate function to Angular and encountering errors along the way. I would really appreciate some assistance with identifying the mistake I am making. The specific error message I receive is Cannot read property &apos ...

javascriptangularjsnode.jsmongodbmongoose

"Creating eye-catching popup images in just a few simple steps

<div className="Image popup"> <Modal isOpen={modalIsOpen} onRequestClose={closeModal} contentLabel="Image popup" > <img src="../img/navratri-1.png" alt="Image popup" /> <b ...

javascripthtmlreactjsbootstrap-4

Dynamically enhance dropdownlist options in webforms using JavaScript

I am currently working on an asp.net webforms project where I have a page with 2 dropdown lists. Whenever a user selects an option from ddl1, I want to dynamically add that selected element to ddl2 using JavaScript. Initially, when the page loads, ddl1 h ...

javascriptc#jqueryasp.netwebforms

What is the technique for showcasing a collection of <v-img> elements with the v-for directive?

Hey there, hope you're all doing well. I'm curious about how to use the v-for method in Vue js to display a list of images. For example, if I have code that looks like this: <v-flex> <h4>{{$translate('bz_doc_path') ...

javascriptvue.js

Only certain fields are returned by JQuery's form serialize() method

Encountering an issue with the serialize() function in jQuery when attempting to submit a serialized form via AJAX. Some of the field values are not being retained. Suspecting a problem with either my HTML structure or jQuery code: <div id="register" ...

javascriptjqueryajaxformsserialization

Error Encountered When Updating cGridView in Yii: "TypeError: $.fn.yiiGridView is undefined"

I'm encountering an issue with updating the gridview TypeError: $.fn.yiiGridView is undefined; after using AjaxLink Click Button for Refresh <script> $(document).ready(function(){ $("#tombol_refresh").click(function(){ $.fn.yiiGridView ...

javascriptphpajaxyiimodel

What is the proper way to retrieve a function from an angular module?

Here is a snippet of AngularJS code for a wallet module: angular.module("app.wallet", ["app.wallet.directive", "app.wallet.service"]), angular.module("app.wallet.service", []).factory("$wallet", ["$rootScope", "$$http", "$e", "$toast", "errorMap", "$popu ...

javascriptangularjs

Is organizing a table into separate sections helpful?

I'm currently working on a personal project using Material UI, but I have a more general query regarding table implementation. I have designed a layout in Figma that I like, but I am struggling to translate it into code. https://i.sstatic.net/NoWEB.p ...

htmlcssreactjshtml-tablematerial-ui

The priority of custom attributes in HTML

There seems to be some ambiguity regarding whether data- attributes should be considered primary or secondary syntax. Is there a defined standard for this in major frameworks like Angular? For example, if an attribute is specified as both my-attr and dat ...

javascripthtmldom

Ways to compare UTC timestamps using JavaScript

Insight into Time Data I have obtained UTC start and end times from a database query, which are stored in an array format as follows: [ '9145001323', '08:00', '12:00' ] The second and third elements in the array indicate t ...

javascriptarraysdatetime

The Javascript function fails to trigger during the OnKeyPress and OnKeyDown events

I have encountered an issue while trying to call a function called validateQty on both the onkeypress and onkeydown events of a text input field. When I was passing only one parameter, which is the event itself, everything was working perfectly fine. Howev ...

javascriptphphtml

Perform an update followed by a removal操作

I've been facing a persistent issue that has been troubling me for quite some time now. The setup involves a database in MariaDB (using WAMP) and an API in ExpressJS. Within the database, there are two tables: "menu" and "item," with a foreign key rel ...

javascriptnode.jsexpressasynchronousbdd

JavaScript encountered an issue as it attempted to reference the variable "button" which was

I am currently working on developing a new API, but I have encountered some issues with JavaScript: Below is my JS/HTML code snippet: const express = require('express'); const app = express(); const PORT = 3000; submit.onclick = function() ...

javascripthtmlnode.jsexpressbutton

Tips for optimizing Slider Code to showcase an expanded selection of slides

I am currently troubleshooting a slider code on my ASP.NET website. After examining the HTML, JS, and CSS from the page theme, I noticed that only two slides are being displayed. However, when attempting to add a new slider HTML and adjusting the CSS for t ...

javascriptjqueryhtmlcss