Include the array in the 'content' property of the CSS using Jquery

I need help formatting data in CSS. The code I have is as follows:

if (ext){
    switch (ext.toLowerCase())
    {
        case 'doc': pos = 'doc'; break;
        case 'bmp': pos = 'bmp'; break;                       
        case 'jpg': pos = 'jpg'; break;
        case 'jpeg': pos = 'jpeg'; break;
        case 'mp3': pos = 'mp3'; break;
        case 'avi': pos = 'avi'; break;
        case 'wmv': pos = 'wmv'; break;
        case 'flv': pos = 'flv'; break;
        case 'pdf': pos = 'pdf'; break;
        case 'txt': pos = 'txt'; break;
        case 'xls': pos = 'xls'; break;
        case 'rar': pos = 'rar'; break;
        case 'zip': pos = 'zip'; break;
        default: pos = 'doc'; break;
    };
    fileIcon:after.css({content:'pos'})
};

});

How do I translate this case data into CSS styling:

.fileIcon:after
{ content: "";
}

The solution: https://jsfiddle.net/e9wjzqjd/3/ if assistance is needed

Answer №1

If you want to add a new <style> element to the <head>, you can achieve this by following this example:

var cssStyle = '.fileIcon:after { content: "' + pos + '";}';
$('<style>').text(cssStyle).appendTo('head');

Keep in mind that pseudo classes like :after cannot be accessed directly in the DOM using JavaScript.

Answer №2

Instead of writing a CSS rule, it is more effective to utilize a data attribute

document.getElementById("y").setAttribute("data-category", "active");
span[data-category]:before { 
content: attr(data-category); 
}
<span id="y" data-category=""></span>

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

Understanding Variable Scope in JavaScript: How Variables are Accessed in Different Functions

I've been experimenting with a script that utilizes jQuery's get function to transfer data to another page and display the returned information as an alert on the current page. My goal is to send both the search field value from an input form (wh ...

Showing the output variable from node.js on a canvas

Is it possible to display the output of my node.js program, which consists of a series of points (x,y), on canvas without a browser? I came across this module that could potentially help with displaying the points: (https://www.npmjs.com/package/canvas) ...

Is there a solution to resolving the type error that I am unable to identify?

I am attempting to implement a custom cursor feature in Vue 3, but unfortunately my code is not functioning as expected. Below you can find the code snippet I have been working on: <template> <div id="cursor" :style="cursorPoi ...

The scrolling element mirrors the movement of the scrolling window

Can you help me understand how to create a scrolling element that follows the scrolling of the window? I want the element to scroll down when the window reaches the end, and scroll up when the window is at the top. I tried implementing this functionality ...

The Element should take up the entire page with the exception of a 20px margin

I am struggling to create an element that covers the entire page except for a 20px margin on all sides. I have tried implementing a solution using this code, which works in webkit browsers and Firefox but seems to have issues with Internet Explorer (10) an ...

Tips for halting the navigation bar when scrolling

Creating a Navigation Bar: <div class="navigation-bar"> <div class="item">Home</div> <div class="item">About us</div> <div class="item">Our Services</div> <div class="item">Contact us</div ...

What is the best way to extract the value of a string before a comma in Javascript?

I have a challenge where I need to eliminate the city from a city, state combination. For example, if I have the string "Portland, OR", I want to extract only "Portland". Can someone help me with a Javascript solution or guide me on how to achieve this usi ...

Stop Bootstrap popover from being displayed before it is hidden using .hide()

I am attempting to control the display of a popover based on a certain condition. <form class="submit-form" action="{% url 'search' %}" method="post"> {% csrf_token %} ...

During the initial cycle, the CSS keyframes animation may experience glitches, but it will run smoothly in subsequent cycles

Seeking advice on troubleshooting a CSS keyframes animation issue. I have created an animation with 5 frames where the background image fades and transitions to the next image smoothly in all cycles, except for the first cycle where it glitches before each ...

Generate a collection of elements using a different collection as a reference

I am struggling with an array of objects: let data = [{ createdDate: "2222", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="087c6d7b7c3d487c6d7b7c266b6765">[email protected]</a>", histories: [ ...

Tips for confirming receipt of a message through socket.io on the client side

What is the process for ensuring that a message sent using the socket.io library has been successfully received by the client? Does socket.io provide a specific method for confirming receipt? Appreciate any insights you can provide! ...

Exploring the implementation of if statements within the array map function in the context of Next.js

Is there a way to wrap certain code based on the remainder of the index number being 0? I attempted the following approaches but encountered syntax errors. {index % 3 === 0 ? ... : ...} {index % 3 === 0 && ...} export default function UserPosts() { / ...

Creating a duplicate of a Flex object in HTML without the need to reinitialize

I'm currently developing a flash object that involves processing a large number of images. My goal is to load multiple flash objects on the same page in order to capture an image, make adjustments, and then display it within each flash object. Howeve ...

Enabling real-time notifications through Express 4 middleware with socket.io integration

I am in the process of developing a real-time notification system utilizing socket.io. Here is the current server-side code I have implemented: bin/www: var app = require('../app'); var server = http.createServer(app); var io = app.io io.attac ...

Is there a way to automatically mute the sound on a parallax website homepage video when I navigate back to the homepage from another page?

Is there a way to automatically mute the sound of the homepage video on a parallax website when navigating back to it from a separate page? If I click on the enter button and navigate to the "Our DNA" page, then click on the events link in the menu from t ...

Angular parent scope does not reflect changes when a directive updates the shared scope variable

My directive is designed to validate and modify a specific binded value before triggering the button action. However, I am facing an issue where any updates made to the directive value are not being reflected in the parent scope. Even though I have used (= ...

Top method for organizing Vue JS elements

I am looking to integrate a search feature on my website using Vue 2, where the search functionality will be applied to components generated from a JSON file upon page load. The JSON file contains the keywords I want to utilize for the search - specifical ...

What can I do to resolve the problem with td border

Check out my website over at browsethewebclean.com I've come across a peculiar issue with the borders and background color of some nested tables on my page. It seems that the border is not aligning properly and the background color goes beyond the im ...

Enhance your Zara shopping experience with the dynamic image zoom-in

I am currently exploring ways to replicate the image zoom-in feature seen on Zara's product pages. To see this effect in action, visit their site: Upon clicking on the image, it opens up in a popup window where it is enlarged to fit the entire screen ...

Error: The value is null and cannot be read

My external application is set up within a const called setupRemote, where it starts with the appConfig in the variable allowAppInstance. export const setupRemote = () => { if (isRemoteAvailable) { try { ... const allowAppInstance = S ...