How to set multiple CSS display property values with jquery

Question

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?

Pushpendra · Accepted Answer · 2016-06-07 06:53:14Z

3

$('.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.

edited Jun 7, 2016 at 6:53

answered May 26, 2016 at 20:41

Pushpendra

1,71214 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Weber Over a year ago

Definitely better than my answer. This is the way to go.

Dan Weber · Accepted Answer · 2016-05-26 20:43:40Z

2

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>

edited May 26, 2016 at 20:43

answered May 26, 2016 at 20:36

Dan Weber

1,2371 gold badge11 silver badges22 bronze badges

Comments

jasonmp85 · Accepted Answer · 2016-05-26 21:34:33Z

0

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

edited May 26, 2016 at 21:34

jasonmp85

6,8572 gold badges28 silver badges41 bronze badges

answered May 26, 2016 at 20:38

multimediavt

112 bronze badges

Collectives™ on Stack Overflow

How to set multiple CSS display property values with jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related