Retrieve the stylesheet based on the presence of a specific class

Is there a way to dynamically add a CSS stylesheet based on the presence of a specific class on a page?

For example, instead of checking the time and loading different stylesheets, I want to load different stylesheets depending on the class present in the HTML:

<script>
<!--
function getStylesheet() {
    if(document.body.classList.contains('company')) {
       document.write("<link rel='stylesheet' href='company.css' type='text/css'>");
    }
    if(document.body.classList.contains('contact')) {
       document.write("<link rel='stylesheet' href='contact.css' type='text/css'>");
    }
    if(document.body.classList.contains('enterprise')) {
       document.write("<link rel='stylesheet' href='enterprise.css' type='text/css'>");
    }
    if(document.body.classList.contains('media')) {
       document.write("<link rel='stylesheet' href='media.css' type='text/css'>");
    }
}

getStylesheet();
-->
</script>

This script will check for the presence of specific classes like "company," "contact," "enterprise," or "media" in the body element and then load the corresponding CSS file.

javascriptcssfunctionif-statement

Answer №1

If you want to check if a certain class is present on a webpage using jQuery, you can do so by implementing the following code snippet:

if ($('.class').length){
    // Your code here
}

Simply replace .class with the specific class name you are looking for.

For example: 

if ($('.company').length){
    document.write("<link rel='stylesheet' href='company.css' type='text/css'>");
}
if ($('.contact').length){
    document.write("<link rel='stylesheet' href='contact.css' type='text/css'>");
}
and so on...

Answer №2

For those utilizing jQuery, a highly recommended tool:

var types = ['organization', 'individual', 'corporation', 'press'];
for (i in myTypes) {
    if ($('.' + types[i]).length) {
        applyStyle(types[i])
        break;
    }
}

Answer №3

Avoid splitting your stylesheets into multiple files as it does not offer any advantages. Instead, maintain all your styles in a single stylesheet and apply them to the page elements using classes on <body> or <html>. Let me illustrate with a brief example.

<body class="page-product">

Then write 

.page-product h1 { }

and so forth.

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

Challenges in the Knockout Framework Due to Synchronization Issues

Recently, I've encountered a slight problem with race conditions in my code. Utilizing Knockout.Js to collect information for user display has been the cause. The issue arises when a dropdown needs to be created before a value can be selected. Typica ...

javascriptknockout.jsrace-condition

What could be causing jQuery's Promise.reject to fail?

Currently, I'm dealing with a REST API that resembles this stub: Snippet 1 (example based on Ruby on Rails). I have some existing jQuery code using classic callbacks: Snippet 2 It's running with these logs: case 1: [INFO] /api/my/action1: rece ...

javascriptjqueryruby-on-railsajaxpromise

Setting up button alignment in Bootstrap

In my current template, I am utilizing Bootstrap and need to position three buttons accordingly. The first button should be all the way to the left, the second in the middle, and the third (final) one on the right within a container element. While attempt ...

htmlcsstwitter-bootstrap

Modifying the content within a DIV element

I want to make changes to my DIV. <div id="main"> <div id="one"> <div class="red"> ... </div> <img class="avatar" src="img/avatar1.jpg"/> <span class="name"> John < ...

javascriptjqueryhtmldomweb

An effective method for finding a key in a multi-dimensional array or object based on its value using JavaScript and/or jQuery

I have a unique object structure that resembles the following: var data = {}; data.items = { name : 'apple', price : '$1.00' }; data.products = { name : 'banana', price : '$0.50' }; data.goods = { name : 'oran ...

javascriptjquerysearchobject

Issue with Materialize Sidenav: Not functional on iOS devices including iPhones, functions correctly on all other devices

My Materialize Sidenav is functioning on all devices except for iPad and iPhone. If you want to check out the code, here is the link to the repository: repo. Take a look at index.html (line 44 down) and js/onloadSetup.js. I attempted adding this in onload ...

javascriptioscssiphonematerialize

Numerous references embedded within a Vue.js component

I am currently working with multiple instances of a polygonCrop component in Vue.js, each one having a unique reference to a canvas property. These components are utilized in separate crop functions triggered by button clicks. My question is how to effecti ...

javascriptvue.js

Is it possible to scroll only a portion of a div element without relying on absolute positioning and when the

HTML: <div class="block"> <div class="header">Some text</div> <div class="content"> <p> Unique content goes here. </p> <p> More unique content for demonstration ...

htmlcss

The Bootstrap switch feature may encounter issues when trying to operate on dynamically generated checkbox inputs

My website is equipped with a mix of essential scripts: jQuery, Bootstrap, Modernizer, and JSON2HTML. I am trying to implement the following code snippet: <script> $('#my01Switch').bootstrapSwitch({ onText: 'ON', ...

javascriptjquerytwitter-bootstrap

Maintaining an element's vertical position in relation to the screen with jQuery

I'm very close to achieving what I want, but my goal is a bit unconventional. My setup includes several panels divided into 2 columns, with each panel capable of triggering an expand/compress toggle. My challenge is maintaining the vertical position ...

jquerycss

Issue with retrieving body class in Internet Explorer on Magento platform. The body class is not being recognized in IE, but works fine in Mozilla and Chrome

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>" dir="ltr"> <?php echo $this->getChildHtml('head') ?> <bod ...

jqueryhtmlcssmagento

Using jQuery to serialize parameters for AJAX requests

I could use some help figuring out how to set up parameters for a $.ajax submission. Currently, I have multiple pairs of HTML inputs (i pairs): > <input type="hidden" value="31" name="product_id"> <input > type="hidden" value="3" name="qua ...

javascriptphpjqueryajax

The iframe content is not updating despite using jQuery

On this site , the following code is present: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <iframe style="position: absolute; top: 0; left: 0; height: 100%; width: 100%" src="blank.html"></iframe ...

javascriptjqueryhtmliframe

Having trouble centering elements correctly with Bootstrap 5

Just dipping my toes into the world of bootstrap and experimenting with some code. Encountered an issue when trying to center elements properly within columns: <div class="container"> <div class="row"> <div class= ...

cssbootstrap-5

<a href> click here to append a new query parameter to the existing ones

Is there a way to create a link that will add a query parameter to the current URL instead of replacing all existing ones? Here's what I'm looking for: If the current URL in the browser is example.com/index.html, clicking on it should lead to ...

javascripthtmlhyperlinkquery-string

Bizarre Incident Management

My latest project involves a simplistic website featuring arrow images (png) positioned on the left and right sides with fixed placement, allowing users to navigate to the next page. However, an issue arises where the cursor seems unable to select the an ...

htmlcssweb

Tips on changing the color of a dropdown select option in Angular 8

I have been experimenting with changing the color of a dropdown select menu based on the value selected by the user. Here is the code I have been working with: App.component.ts @Component({ selector: 'my-app', templateUrl: './app.comp ...

javascripttypescriptangular8

Draggable resizing of the Accordion component in React.js using Material-UI

In the visual representation, there are two Accordions—one positioned on the left (30%) and the other on the right (70%). Upon clicking the button, the right accordion disappears, while the one on the left expands to cover the full width (100%). A featu ...

javascriptreactjsmaterial-uiaccordiondraggable

Using Linux variables in the .env file of your Vue.js project can provide a convenient way to

Using .env in a *.js file allowed me to set the BANK variable as either A_BANK or B_BANK like so: BANK=A_BANK or BANK=B_BANK However, when passing the argument as A_BANK or B_BANK like: --bank A_BANK in a shell script loop for var in $@ do if [ ${var} ...

javascriptnode.jsshellvue.js

Storing Boolean values in MongoDB with Express JS: A Step-by-Step Guide

I am encountering an issue where a Boolean value that I am trying to store in Mongodb always returns false. Below is the schema of my database: const UserSchema = new Schema({ name: String, password: { type: String, required: true }, isAdmi ...

javascriptnode.jsmongodbexpress