Include a prefix into a cascading style sheet document

One thing I've been working on lately is a neat code that allows me to swap prefixes of images, all thanks to the help I received from maniator!

    $(function() {
    $('img.swap').each(function(){     
    $(this).data('current_image', this.src);     
}) 
$('a').click(function(){          
        var prefix = $(this).attr("class");       
         $('img.swap').each(       
         function() {           
            if($(this).data('prefix') != prefix){            
            this.src = $(this).data('current_image').replace('.gif', (prefix)+'.gif');
            $(this).data('prefix', prefix);          
    }         
     else {            
     this.src = $(this).data('current_image');           
      $(this).data('prefix', '');          
      }       
       });  
      }); 
 });

A question just popped up in my mind - I wonder if it's possible to apply the same prefix being added to the image to a specific CSS file? For example, instead of color.css could I use color_bw.css?

Thanks a bunch!

Answer №1

Indeed, the link tag used to connect the CSS is no different from any other element.

To specify the href attribute, follow this format:

<link id="css" rel="stylesheet" href="styles/reset.css" type="text/css" />

var css = $("#css").attr("href");
var href = css.replace(".css",css+prefix);
$("#css").attr("href",href);

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 using Bootstrap with fullcalendar, the tooltips may not display properly

Currently, I am immersed in a confidential Codeigniter project where my goal is to showcase various events in the view utilizing fullcalendar. While progress has been made, I aspire to exhibit more than just the event's name and time; additional deta ...

What is the best way to halt Keyframe Animation once users have logged in?

To enhance user engagement, I incorporated keyframe animation into my login icon on the website. The main objective is to capture the attention of visitors who are not registered users. However, once a user logs in, I intend for the keyframe animation to c ...

Update an element's margin-right value with jQuery

I have designed a basic <ul> list in HTML and applied different margin-right values to each of the <li> elements using CSS (jsFiddle). Here is the HTML code: <ul> <li>First</li> <li>Second</li> <li& ...

Combining three APIs within an HTML website

Hey there! Currently, I am in the process of combining three APIs into my HTML website. However, there seems to be an issue where each subsequent API integration overrides the previous one, and only the final one functions properly. In the code snippet b ...

When a user clicks, use Jquery to display the sidebar and hide it when

Hey, I could really use some help with this script. I've managed to get the panel to show with a mouse click, but I want it to close when the mouse leaves the panel. Here's a sample: http://jsfiddle.net/jikey/w9s7pt25/ $(function(){ $(' ...

Transform radio inputs into buttons when they are enclosed within a label element

This is my HTML code: <div class="product-addon product-addon-extra-tip"> <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0"> <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" valu ...

There appears to be a malfunction with certain hyperlinks on the table

There seems to be an issue with the four links in the third column, first, second, third, and fourth rows (Order Form PDF, Rental App PDF, Married Rental PDF, and Consent Form PDF) as they are not functioning properly. Below is the provided code snippet: ...

You can move freely between classes A and B, as well as classes A and C, but there is no transition allowed between

A Brief Overview... Take a look at the HTML structure below: <div class="wrapper"> <div class="item above"></div> <div class="item active"></div> <div class="item below"></div> <div class="item ...

Exploring jQuery Ajax: A Guide to Verifying Duplicate Names

When I apply the blur function to a textbox to check for duplicate names using jQuery AJAX, it works perfectly. Here is the code snippet: function checkForDuplicate(data){ $.post("test.php", {name: data}, function (data){ if(data){ ...

Place an <a> hyperlink on top of an <img> element with adaptive responsiveness

I'm working on a React application and I want to overlay multiple links using <a> tags on top of an image <img>. Initially, this seemed easy but I ran into an issue - when the window is resized (on different devices, for example), the posi ...

Bootstrap Datatables for precise matches

Utilizing jquery bootstrap datatables for client-side data rendering with JSON as the data source, I have implemented a filter on top of the view/table using a combobox. The first column of the table contains values such as: Value A, Value AB, Value C, Va ...

Show textarea when a specific option is chosen using PHP

It seems like this question has been asked before, so I apologize in advance. As the title suggests, how can I make a text area appear when a specific option is selected in a .PHP file? Here is the PHP code snippet: <table> <tr class= ...

Can the style attribute be utilized within the <title> tag?

Is it possible to utilize the style attribute within the <title> tag? How can this be implemented effectively? ...

Monitoring specific fields in Jquery for particular values

Here is a block of sample code for testing purposes: <input type="radio" name="group1">1 <input type="radio" name="group1">2 <input type="radio" name="group1">3 <br> <input type="text" name="text1"> <br> <input type= ...

Troubleshooting problem with Bootstrap navigation bar on mobile devices

I need some help with my website development. I am trying to create a simple website with a transparent navbar that overlays an image. Everything looks good on a PC, but when I access the site on mobile, the menu overlaps the content below it. How can I fi ...

Comparing Local Storage and Web SQL databases

I'm currently developing a mobile web app using JQuery Mobile. One of the features I'm working on involves having a page with a jQuery listview, where clicking on each item passes all associated data to a dialog page. To achieve this, I've b ...

Stop bold font weights from affecting line spacing

I am facing a challenge in aligning all lines of text on my website to the baseline grid. The issue arises from the anchors being set to font-weight: bold, which appears to be adding 2px of space above the anchor text. Can anyone suggest a straightforwar ...

How can I eliminate the black outline added to text by IE CSS filter?

Is there a way to add text-shadows to elements in IE without having a black outline around the text when it is not black? I know IE doesn't support text-shadow property but using filter: property gets pretty close. If anyone has any suggestions or so ...

Exploring the implementation of toggling functionality for nested children within <li> elements using jQuery

Unable to get the toggle function working on child nodes. Can someone assist me with this issue? $(document).ready(function() { $('label.tree-toggler').click(function() { $(this).parent().children('ul.tree').toggle(300); }); ...

Animating a menu's children items with jQuery slideDown

While working on converting a superfish responsive menu for a WordPress template, I've encountered a challenge. I have successfully implemented a version based on this jsfiddle example. But to enhance the user experience, I want to incorporate a slid ...