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

Changing the CSS Border of Thumbnails

Guiding you to choose a specific child class by identifying its parent class in CSS and jQuery

What is the maximum amount of information that can be stored in a data attribute within the DOM?

The tooltip in chart.js stubbornly holds onto past data even after it's been

React Native ellipsizeMode - Using two Text elements side by side

Custom-designed scroll bars that perfectly match the size of the content window

Managing errors with Node.js and handling https certificates

Tips for accurately placing the iOS audio player in the footer section

Tips for concealing the values within a selected dropdown list using jQuery

Adjust the parent div's background when hovering over it

Using CSS to create sleek all-black Flaticons

Limiting the amount of blogs shown on a single page can be achieved with Yii 1 and PHP

Encountered an issue while attempting to transfer data using Marak/faker.js

Create additional object property and include in current object's properties dynamically

Animate owlCarousel slide motion in reverse when using the Prev and Next buttons

Ways to troubleshoot NPM installation issues related to gyp ERR

Tips for creating a cookie for an alternate website upon launching a new browser tab

Custom pagination with onSelectionModelChange in React Material UI Data Grid

What is the best way to prevent card-group from wrapping on smaller screens?

Differences between the http module and Express framework