When manipulating the "display" property of a bootstrap element like "row" or "col-md-3" using JavaScript, how can I determine the default value set by Bootstrap CSS?
For instance, the Bootstrap source code likely sets the "display" value for the "row" class to either "block" or "inline-block". If my JavaScript code changes it to "display: none" and I later need to revert it back to its original state, what is the most effective way to know what that original value was?
To hide an element using JavaScript, you can add a hiddenElement class to the element with CSS styles for display:none. This way, you can easily revert back to the visible state by removing the added class without directly changing the CSS of the bootstrap element.
//CSS
.hiddenElement {
display: none !important;
}
//JavaScript
$('#elementToHide').addClass('hiddenElement'); // Adds the class to hide the element
//To make the element visible again
$('#elementToHide').removeClass('hiddenElement'); // Removes the class to show the element
It seems like your goal is to save a backup of the original computed styles for an element. To achieve this, you can utilize window.getComputedStyle(element) to retrieve the computed styles list.
However, to easily revert back to the original styles after making changes, you need to take additional steps.
You can follow this approach:
// Select one or more elements
var row = document.getElementsByClassName("row")[0];
// Store the current styles
var css = window.getComputedStyle(row);
var cssObject = {};
// Convert styles into an object for better handling
for (var i = 0; i < css.length; i++) {
cssObject[css[i]] = css.getPropertyValue(""+css[i]);
}
// Change the color property
row.style.color = "red";
// Restore the original color eventually
setTimeout(function(){
row.style.color = cssObject.color;
console.log(cssObject.color);
}, 2000);
Here is a JSON Input that I will be filtering by orderId and then setting to a state variable. [{"orderId":3,"userId":3,"firstName":"Amal","lastName":"kankanige","contactNo":"011-3456787","status":"pending","deliveryAddress":"No:24/c,Anders Road,Wijerama, ...
How can I populate my radio button in an edit form with data from MySQL by writing the value in the radio button? Below is the code snippet: foreach($arrAnswer as $ans) { <input name = "answer_'.$i.'" type="radio" value="' ...
Recently, I have been experimenting with using a sleek jQuery datepicker and decided to turn it into a directive for my angular app. The implementation of the directive is currently very straightforward: directive('datePicker', function() { ...
I'm facing an issue with my contact form in next.js. Everything was working fine until I deployed it on Vercel. Although I don't see any errors, I am not receiving emails on my Gmail account after submitting the form. Additionally, I am not getti ...
As a beginner in AngularJs, I encountered an issue with having two ui-views on the same page. When I click a button to show the view for goals, both the form for goals appear in ui-view 1 and ui-view 2 simultaneously. I have been working with states but I ...
Currently, I am working on an active form and I would like to include a custom attribute. This is a standard form field: <?= $form->field($model, 'password')->textInput() ?> I want it to appear as: <label class="input"> < ...
The Challenge Setting up a TypeScript project with Jest has been proving difficult for me. It seems that TypeScript is not recognizing the Jest types from @types/jest, resulting in an error message like this: Cannot find name 'test'. Do you nee ...
Writing tests with jest and supertest npm on a node server has been a challenge for me. When I try to run all the tests together, some of them fail inexplicably: However, if I selectively run only the failed tests in the terminal, they pass without any is ...
As a newcomer to Angular, I have encountered a hurdle while attempting to incorporate a 'google maps' directive inside another directive. The following code showcases a 'modal-view' directive that loads a form: angular.module(&apo ...
Long story short, I am facing an issue with my code and seeking some guidance. I have various functions to perform different checks. For this particular example, I have a form with a default value of "enter name here" for one field. Here is the HTML snipp ...
I'm facing an issue - how can I store data in localStorage that was received from the server? Should I use localStorage.setItem for this purpose? And how do I handle storing an array in localStorage? Or am I missing something here? import { HttpCli ...
https://i.stack.imgur.com/uWSsY.pngI am well-versed in HTML, but my knowledge of VB.NET is limited. In standard CSS, including a font like the one below would typically work, but I have encountered issues when attempting to do so in .NET. @font-face { f ...
(Snippet: http://jsfiddle.net/qdP3j/) Looking at this HTML structure: <div id="addContactList"></div> There's an AJAX call that updates its content like so: <div id="<%= data[i].id %>"> <img src="<%= picture %&g ...
How can we resolve the end of file error? The brackets appear to be valid based on ecma standards, but it's not clear what is missing. After using jsonlint, this error was found: *Error: Parse error on line 16: ...States" }] }]}{ "i ...
Welcome_page.php <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#role").on("change", function() { alert($("#role").val()); var rol ...
Encountering the same issue in my browser Cross-Origin Request Blocked: The Same Origin Policy prevents access to the remote resource at http://abc-test123.com/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’). My ...
I have encountered an error while trying to add the "setSelectionRange" method to an input element that I selected using "getElementById". The error message states that "property 'setselectionrange' does not exist on type 'htmlelement'" ...
I need help with implementing a code for two dropdown boxes. The first dropdown should display main category values dynamically, and when a value is selected, the second dropdown should appear with corresponding sub-category values. How can I achieve this ...
In my scenario, when I click on the select dropdown and a popup appears above the field, I would like it to open below that specific area. The desired behavior can be observed in the code sandbox link provided. I need to configure it to start from below th ...
Even after reading numerous answers on similar questions, I am still facing some difficulties. My goal is to allow the user to disable my chrome extension by simply clicking on the icon at any time. The extension is designed to run once on every page load, ...