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?

Answers:

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

Answer

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>

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.