Reputation: 1093
Need to change class in CSS for a DIV based on different screen sizes
<div id="tab" class="tab_small"></div>
I need to change class of DIV having ID "tab" to "tab_small","tab_medium" & "tab_large" based on the screen size using css only
@media(max-width:450px){tab_small class will apply}
@media(min-width:450px) and (max-width:768px){tab_medium will apply}
@media(min-width:768px) and (max-width:990px){tab_large will apply}
Is that doable?
with JS I can do, Is there a way to do with CSS in bootstrap?
If all three classes will be there in HTML on that DIV, is there a way to display one out of them in html based on screen sizes?
Thanks in advance!
Upvotes: 4
Views: 5301
Reputation: 2243
Try this jQuery js solution, probably this will resolve your issue..
<div id="tab" class=""></div>
<script type="text/javascript">
if($('body').width() < 450){
$('#tab').addClass('tab_small');
}else if($('body').width() > 450 && $('body').width() < 768){
$('#tab').addClass('tab_medium');
}else{
$('#tab').addClass('tab_large');
}
</script>
Upvotes: 2
Reputation: 2243
There is not way to change DOM property value using CSS. There is only way to achieve this using javascript.
Upvotes: 3
Reputation: 5683
I think you are trying to achieve a behavior like this. Try to resize the fiddle window. Please be aware that setting a property within #tab
selector will override the @media
queries, if you want to prevent this behavior just use #tab .tab_small
, #tab .tab_medium
, #tab .tab_large
selectors inside the @media
queries.
#tab{
width: 200px;
height: 200px;
}
@media(max-width:450px){
.tab_small{
background:red;
}
}
@media(min-width:450px) and (max-width:768px){
.tab_medium{
background: green;
}
}
@media(min-width:768px) and (max-width:990px){
.tab_large{
background: blue;
}
}
Upvotes: 4