Q:
How to compare an element's attributes (such as width) to a value?
I want to ask, how do I compare a value of an element's attribute (such as width) to a value of a variable in Javascript.
I tried to use JavaScript's 'if' function and then call its 'getElementById' method (for example) for HTML content:
I tried it as:
if(document.getElementById("item").style.width == '50px'){//code}
Also I tried it as:
if(document.getElementById("item").getAttribute("style").width == 50)
Both methods didn't work but I am looking forward to answers with alternative ways for comparing a value of the element's attribute to a variable's value and then to execute a code.
A:
In the first case, you need to use document.getElementById("item").style.width because style is a valid CSS attribute name.
In the second case, you need to use getComputedStyle (MDN) or the non-standard getPropertyValue function (Mozilla) instead, as it looks like you're trying to access an inline style property.
if(document.getElementById("item").getPropertyValue('width') == '50px') {
// this code...
}
For more information, see the DOM specs.
Edit:
As a further note, you can't really use a ternary in your second case, as the value in width isn't a number, which is what the ?: conditional operator can convert to.
Instead, if you want to run code based on the width being the same as 50px, you can use the following:
var itemWidth = document.getElementById("item").style.width;
if(itemWidth == '50px') {
// code goes here
}
In your case, you'd probably want to extract the width number from the string, which is what the above is doing.
Edit 2:
It's not clear exactly what you're trying to achieve. If you want to do something based on the element being 50px wide, you'd need to add a listener for its resize event (MDN) and do something there. Something like:
document.getElementById("item").addEventListener('resize', function() {
if(this.getBoundingClientRect().width == 50) {
// do stuff here
}
});
I've taken your question literally here, so you'd need to remove this. from the getBoundingClientRect part, and if you're trying to compare it to a variable, there's no need to use == '50px'.
The event will fire each time the element changes size. If it's a frequent thing to check, you might want to look at CSS variables or changing the HTML of the element.
Edit 3:
With the final edit, I think I might be misreading your question.
If you want to run code whenever the width of the item element changes, you can set up an event listener on that element and then check the width property of the event object. So, something like this:
document.getElementById("item").addEventListener('resize', function() {
if(this.getBoundingClientRect().width == 50) {
// do stuff here
}
});
If you don't want the code to run whenever the element's width changes, but rather when the event is first fired, you can use event delegation. The following would run the code above for all elements with ID of item within the DOM, even if the event didn't happen on that element.
// run for all IDs that start with 'item'
document.addEventListener('resize', function(event) {
if(event.target.id.includes('item')) {
if(event.target.getBoundingClientRect().width == 50) {
// do stuff here
}
}
}, false);
I believe in this case, there's no reason to make the reference local to the function, but it can't hurt.
Finally, if you're using jQuery, you can use its on function. For example:
$('#item').on('resize', function() {
if(this.getBoundingClientRect().width == 50) {
// do stuff here
}
});
Edit 4:
Based on the final edit, it looks like you want to execute a function when the event is triggered, rather than run a comparison to check the value of the attribute. In that case, you can just use a named function in the event handler:
document.getElementById("item").addEventListener('resize', showValue, false);
This will execute the function, given the name showValue within the addEventListener function.
A:
You can simply use this:
document.getElementById("item").getAttribute("style").width = "50px";
The getAttribute method can be used to fetch an attribute value from a DOM node.
A:
Here is one solution to the issue:
if(document.getElementById("item").getBoundingClientRect().width == 50) {
alert('it\'s 50px wide');
}
