Retrieve the stylesheet based on the presence of a specific class

Question

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.

javascript css function if-statement

Answer 1

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

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 3

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 4

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 5

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.

Answer 6

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.

Retrieve the stylesheet based on the presence of a specific class

Answer №1

Answer №2

Answer №3

Similar questions

How can a JQuery slideshow be programmed to only iterate once?

Res.redirect() function does not redirect the browser URL as expected when triggered by a request made through a frontend fetch() call

Unable to loop through the "dataList" retrieved from a service call to the java backend within an Angular 9 application

Inaccurate audio timestamps in Chrome

Managing JSON data through AJAX in ColdFusion

Using React js to create a blurred background effect when an input field is in focus

Retrieve data from each URL listed in a JSON array using React

What is the best way to efficiently transmit Objects through AJAX utilizing bodyParser in node.js express?

Converting dynamic content within a div into an interactive link

Implementing concurrent operations in React Native using Firebase, combining async/await with Promise.all

What is the function of the next and back buttons in AngularJS?

Having trouble deciphering mathematical formulas while editing content on ckeditor

Problem with Ionic 2 local storage: struggling to store retrieved value in a variable

Building a React Typescript service with axios functionality

Issue with using bind(this) in ajax success function was encountered

Vue.js / Nginx / Node.js - Error 413: Payload Too Big

Blazor Shared CSS File

The code is functioning properly, however it is returning the following error: Anticipated either

Encoding and Displaying Characters in HTML with UTF-8

`Enhancing Navigation Links with Scroll-Activated Styling`