CODEWITHSUNDEEP
javascriptjqueryhtmlcss
multimediavt
multimediavt

Reputation: 11

How to set multiple CSS display property values with jquery

Ok, this is driving me a bit batty. I am using the jQuery .css() method to try to set the multiple flexbox display properties needed for a class. Problem is, it only keeps the last one. Any idea on how to do this with jQuery, or is it not possible?

Here's what I've tried so far:

$(".department-name").css({
    'display' : '-webkit-box',
    'display' : '-webkit-flex',
    'display' : '-moz-box',
    'display' : '-ms-flexbox',
    'display' : 'flex'
});

That doesn't work, it just gets the last one and not the others. I am manipulating a text element on a page based on how many line wraps it has (its height) and want to hide it with display:none (initial CSS value), manipulate it, then display it with the flex properties it had before I started changing the JS code to deal with the multiple line problem. Ideas?

Upvotes: 1

Views: 1531

Answers (3)

Pushpendra
Pushpendra

Reputation: 1712

$('.department-name').addClass('test1');

css:

.test1{
   display : -webkit-box;
   display : -webkit-flex;
   display : -moz-box;
   display : -ms-flexbox;
   display : flex;
}

You can use addClass() method to add test class into your element. in css() method display property must be getting overrides hence the last one is only applying.

Upvotes: 3

multimediavt
multimediavt

Reputation: 11

Nevermind. There is an h4 inside that .departmentname div that I changed the display property for, so problem solved. Thanks for the feedback though.

Upvotes: 0

Dan Weber
Dan Weber

Reputation: 1237

Store it in a variable:

var displayStyle = [
  'display: -webkit-box',
  'display: -webkit-flex',
  'display: -moz-box',
  'display: -ms-flexbox',
  'display: flex'
].join(';');


$(document).ready(function() {
  $(".department-name").attr('style', displayStyle);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='department-name'>TEST</div>

Upvotes: 2

Related Questions