Adding CSS using jQuery

Edit on Github
webdev/jquery-add-css.md
Feb 18, 2020
Web Development

You can add a style using .css()

jQuery("#popularUsersContainer").css("max-height", "360px")

You can also pass it a styles object (like a React Native stylesheet object) if you want to add multiple values

let containerStyles = {
  maxHeight: `${containerHeight}px`,
  display: 'flex',
  flexWrap: 'wrap',
  justifyContent: 'center',
  overflow: 'hidden'
};

jQuery("#popularUsersContainer").css(containerStyles)

If you want hover styles, you’ll combine .css() with .hover()

$("div.myclass").hover(function() {
  $(this).css("background-color","red")
});

$(".myclass, .myclass2").hover(function(e) {
    $(this).css("background-color",e.type === "mouseenter"?"red":"transparent")
})