How to change html data-start-height by Media Queries?

Question

I have a website Based on a template I bought on themeforrest, the banner of the homepage of this site has its height adjusted by this attribute: data-start-height (which I had never used, I know html and css intermediary). I would like to change this attribute according to the user device by media queries, I know change the standard css height, but I would not like to touch the html structure of the site so I wanted to know if it is possible to modify this the data-start-height by media queries or other similar solution.

<section class="main-slider" data-start-height="550" data-slide-overlay="yes">

Answer 1

Can you try:

$(window).resize(function(){
    if ($(window).width() <= 800){  
        $(".main-slider").attr("data-start-height", 500);
    }else if($(window).width() <= 600){
        $(".main-slider").attr("data-start-height", 350);
    }
    // ...
});

The $(window).resize(function(){...} executes when the page is resized.

With $(window).width() you take the screen size width and check if it’s less than 600px, 500px, 800px...

And according to the screen sizes you define a value for data-start-height with:

$(".main-slider").attr("data-start-height", 500);