If I click a button I can assign it a function like bellow
document.getElementById("mySidenav").style.width = "250";
This works fine, however I wish do give it a different width for different screen sizes so I was going to set the width in a class so that i can use a css media query.
instead of .style.width = "250";how can I tell it to take the values of a CSS class instead ?>
Just for reference, CSS names cannot start with digits, per the W3C spec. Your edited post removes the need for this comment but it's worth noting.
To manipulate classes via JavaScript, either use className (as in myElement.className = 'some-class') or the classList interface. However, you specifically mentioned "different screen sizes" and this is a prime candidate for responsive CSS queries using the @media selector.
With all that being said:
JavaScript example
// CSS
#mySidenav {
width: 1000px;
}
#mySidenav.responsive-class {
width: 500px;
}
// JS
const mySidenav = document.querySelector('#mySidenav');
window.addEventListener('resize', function() {
if (window.innerWidth < 200) {
mySidenav.classList.add('responsive-class');
}
else {
mySidenav.classList.remove('responsive-class');
}
});
CSS example
#mySidenav {
width: 1000px;
}
@media query and (max-width: 200px) {
#mySidenav {
width: 500px;
}
}
As you can see, the latter example is much simpler. Go with the CSS approach. A halo will appear over you.
I used @Shenh's answer to work out a solution +1 Sheng.
Please see bellow I added new class and removed class
function openNav() {
document.getElementById("mySidenav").classList.add('popoutwidth');
}
function closeNav() {
document.getElementById("mySidenav").classList.remove('popoutwidth');
}