If I have an li element like this:
<li id="1" class="show" style="display: none;">and the CSS class contains:
.show {
display: list-item !important;
}
I attempted to retrieve the value of the display attribute with:
document.getElementById("1").style.display
which returned "none".
Despite the CSS class, the real display value is list-item.
How can I use JavaScript to get the correct and applied display value?
When it comes to determining the style properties of an element, Window.getComputedStyle() is a useful tool. You can see an example of it in action at this link.
var target = document.getElementById("list-item-1");
var displayProperty = window.getComputedStyle(target, null).getPropertyValue("display");
If you need to access the computed style, check out the following resource: http://javascript.info/tutorial/styles-and-classes-getcomputedstyle
getComputedStyle(document.getElementById("1"))["display"]JavaScript Code: utilizing the getComputedStyle method
var element = document.getElementById("1");
alert(window.getComputedStyle(element, null).getPropertyValue("display"));.show {
display: list-item !important;
}<li id="1" class="show" style="display: none;">jQuery Example: utilizing the .css method
alert($('#1').css('display'));.show {
display: list-item !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="1" class="show" style="display: none;">Searching for the particular style being used to display the element? You'll want to utilize window.getComputedStyle:
var displayProperty = window.getComputedStyle(element).display
On a side note, please remember that an id cannot start with a number as it violates the rules of HTML.
It is simply retrieving the value of the display property from the style attribute that is present in your markup.
console.log(document.getElementById("1").style.display).show {
display: list-item !important;
}<li id="1" class="show" style="display: none;">adsfds</li>However, when you inspect the element in the browser, you can see that the display: list-item !important; style is being applied.
Refer to the image linked below for a visual representation.
https://i.sstatic.net/kjiUr.jpg
To obtain the actual applied style, you can use the getComputedStyle function as shown below.
var elem = document.getElementById("1");
console.log(window.getComputedStyle(elem).display).show {
display: list-item !important;
}<li id="1" class="show" style="display: none;">adsfds</li>Note : It is unnecessary to explicitly set the display property to 'list-item' for a list item, as it is the default behavior.
Avoid using inline CSS styles by eliminating style="display: none;" from your HTML code. Instead, establish a .hidden { display: none; } class within your CSS file and utilize it to hide or show elements as needed. This way, you can easily determine the visibility of an element by examining its assigned CSS class.
I'm currently working on a navigation menu using jQuery that includes categories, subcategories, and their subsequent subcategories. However, I am facing some issues with it not functioning as intended. To avoid cluttering this space with excessive HT ...
From my Angular file, I am sending this request to the server. Is there a way to access it from my typescript file using a HttpClient object? IncomingMessage { ... // Headers details omitted for brevity url: '/teradata/databases/view/djfg', ...
How can I center a play icon in the middle of a td cell and make the entire content clickable as a link, including the background image? I've tried various methods but can't seem to get it right without breaking the alignment. Any suggestions wou ...
I am attempting to create a PDF using FPDF in PHP. Here is my AJAX call: form = $('#caw_auto_form'); validator = form.validate(); data = form.serializeObject(); valid = validator.form(); //alert("here"); ajax('pos/pos_api.php',data,fun ...
I am currently facing an issue with the following problem: I have a form that includes a single search field with autosuggest functionality. I want to be able to type either a name or mobile number in this field. As I type, suggestions should appear base ...
I'm experiencing an issue where the document.ondrop function seems to be working in Chrome, but not in Firefox. Here's a link to an example demonstrating the problem: In the example, if you try to drop a file onto the page, it should trigger an ...
I am looking for a way to display and hide a section on my page when a specific tab is active, and close it when the tab is inactive. I have tried using the forceOpenSettings and forceCloseSettings methods for opening and closing the div. Is there an event ...
I'm currently venturing into the world of jQuery animate() and decided to create a presentation-style project for practice. However, I've hit a roadblock when attempting to alter the text within my div element in the midst of an animation utilizi ...
Let's address a disclaimer before diving into the issue - for a quick look, visit this pen and type something there. The Scenario This is the JSX code snippet used in my render method: <input value={this.state.value} onChange={this.handleCh ...
Having trouble aligning these buttons horizontally. Any suggestions? I've been tinkering with this for a couple of hours now, so decided to seek help here. The desired effect should resemble the image below, but it's not quite there yet. Thank yo ...
I'm currently working on enhancing my navbar by adding links based on searches made by users and their favorite selections. My goal is to avoid duplicate entries in the "past searched" section if the current search already exists in the list. I'm ...
Is it possible to print a newline in a textarea using the HTTPRequest property? Here's the code I have: <script> function sendRequest(str) { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } el ...
I am looking to extract the value of myJSONObject from an HTML document that includes javascript code with a JSON object. Here is an example snippet: <html> <head> </head> <body> <script type="text/javascript"> ...
My objective is to perform CRUD operations on a JSON object stored in the state, whose structure is not fixed, but rather dynamic and subject to change. To display this JSON structure, I am utilizing a recursive functional component that keeps track of th ...
We're currently facing a challenge with an error message stating Uncaught Error: Can't set headers after they are sent. when attempting to link a user sign-in to a test using chai-http. The test signs in a user already existing in the database v ...
I am looking to create a Node.js daemon that can operate across multiple computers while facilitating message exchange between the daemons. Security is paramount, so I want to ensure the communication is encrypted. However, I am uncertain about which encry ...
Looking to optimize data parsing in JavaScript for a large file? I'm currently using JSON parse for a 250MB file, but it's too slow. Is there a faster method to extract a high volume of data without iterating through every character? The file con ...
Just starting out with css, trying to get some practice. I'm attempting to position two divs on opposite sides of a parent div. Switching flex-direction from 'column' to 'row' causes the divs to disappear. #assignments-wrapp ...
Creating a text component where the first word of the sentence is bold can be a bit tricky. The current solution may result in a messy output like "Tips: favouritevacation" where there is no space after "Tips:". This approach is not very elegant. One pos ...
Which directives in AngularJS support one-way binding? While ng-model enables two-way binding, what about ng-bind and {{ }} expressions - do they also support one-way binding? ...