Applying CSS styles to a page depending on certain conditions

Question

Applying CSS styles to a page depending on certain conditions

Currently, I have a page in SharePoint that can function as a pop-up. I am using JavaScript to identify whether it is a pop-up by checking if

window.location.search.match("[?&]IsDlg=1")

. However, I am struggling to figure out how to insert CSS based on this condition.

One approach I am considering is adding a label to the page and then using code behind to determine the condition and insert the CSS. But I also want to explore the possibility of achieving this through JavaScript. Can someone please provide guidance?

I believe I could potentially use jQuery like this:

$('<style type="text/css">#foo { background: #000; } </style>').appendTo("head");

Thank you.

javascript css

Answer 1

Answer №1

I'm a bit confused by your inquiry, would you mind providing some code for better clarification? With the use of jQuery, you have the option to modify CSS in this manner:

$('.my-div').css('display','block');

Alternatively, you could specify the CSS in your stylesheet and assign classes to your elements as shown below:

$('.my-div').addClass('yellow-border');

Answer 2

I'm a bit confused by your inquiry, would you mind providing some code for better clarification? With the use of jQuery, you have the option to modify CSS in this manner:

$('.my-div').css('display','block');

Alternatively, you could specify the CSS in your stylesheet and assign classes to your elements as shown below:

$('.my-div').addClass('yellow-border');

Applying CSS styles to a page depending on certain conditions

Answer №1

Similar questions

Preventing jQuery parser from turning arrays into objects

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Integrating individual front end JavaScript files into an Express.js application

The problem with div height, the div is not extending to cover the entire body

I am looking to modify the ID of the select element nested within a td tag

Does IE 9 support Display Tag?

What purpose does the next() function serve in Express.js?

Is there a specific explanation as to why ng-repeat-start is not functioning properly even with the most recent version of AngularJS?

Passing the v-model property from a child component to a parent in VueJS

Is this code in line with commonly accepted norms and standards in Javascript and HTML?

A sleek Javascript gallery similar to fancybox

Blending ASP.NET Core 2.0 Razor with Angular 4 for a Dynamic Web Experience

Experience the full power of the bootstrap grid system with a unique feature: nested overflow-y scrolling

Encountering issues with CSS Modules in Next.JS app while using app/about/layout.tsx

Adding an onload event in a function-based component without using a fetch call

We are hosting an event focused on DOM text selection outside of Input or TextArea elements

Unable to hear sound on Mozilla Firefox

Utilizing a particular iteration of npm shrinkwrap for project dependencies

Transform a group of objects in Typescript into a new object with a modified structure

Obtain URL parameters prior to rendering with Next.js on the server side