How to use jQuery script to define a variable html and dynamically change the CSS style of the page based on this value
How to use jQuery to define a variable html and dynamically change the page’s CSS style based on its value
In web development, we often need to dynamically change the page’s style based on various conditions. jQuery is a very popular JavaScript library that helps us easily manipulate DOM elements and handle events. In this article, we’ll explain how to use the jQuery script to define a variable named html and dynamically change the page’s CSS style based on this value.
1. Importing the jQuery Library
Before using jQuery, we need to import the library. You can introduce jQuery through a CDN link or by downloading a local file. The following is a sample code that introduces jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic CSS with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- Page Content -->
</body>
</html>
2. Define the html variable
First, we need to define a variable called html to store the HTML content of the page. We can use jQuery selectors to access elements on the page and assign their contents to the html variable. The following is a sample code to define the variable html:
</pre> <p>In this code, we use <code>$('body').html()to retrieve all the HTML content within the<body>tags of the page and assign it to the html variable. We then use theconsole.log()method to output the HTML content to the console.3. Dynamically Changing CSS Styles
Next, we can dynamically change the page's CSS style based on the value of the html variable. We can use jQuery's
css()method to set the CSS properties of an element. The following is example code for dynamically changing CSS styles:$(document).ready(function() { var html = $('body').html(); if (html.includes('geek-docs.com')) { $('body').css('background-color', 'lightblue'); } else { $('body').css('background-color', 'lightgray'); } });In this code, we first check whether the html variable contains the string 'geek-docs.com'. If so, we set the page background color to lightblue; otherwise, we set it to lightgray.
4. Complete Example Code
Below is a complete example code that demonstrates how to use jQuery script to define a variable named html and dynamically change the CSS style of the page based on this value:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dynamic CSS with jQuery</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <h1>Welcome to geek-docs.com</h1> <p>This is a sample paragraph.</p> <script> <span class="katex math inline">(document).ready(function() { var html =</span>('body').html(); if (html.includes('geek-docs.com')) { <span class="katex math inline">('body').css('background-color', 'lightblue'); } else {</span>('body').css('background-color', 'lightgray'); } }); </script> </body> </html>Output:
In this example, when the page contains the string 'geek-docs.com', the page background color changes to lightblue; otherwise, it changes to lightgray. This allows us to dynamically change the page's CSS style based on the value of the html variable.
Through the above example, we learned how to use jQuery to define a variable html and dynamically change the page's CSS style based on this value.
