How to set non-standard css properties using Jquery?

Question

I'm trying to change css using jQuery but mso-hide property doesn't get saved using jQuery.

What other solution will be to do this using jQuery?

styleCSS = {
    'display': 'none',
    'height' : '0px',
    'line-height' : '0px',
    'max-height' : '0px',
    'overflow' : 'hidden',
    'font-size': '0px',
    'mso-hide' : 'all',
    'width' : '0px',
    'max-width' : '0px'
}
$('.container').find('.hide-me').css(styleCSS);

Have you tried directly implementing the style without using find? — aavrug
– aavrug, Commented Dec 20, 2016 at 9:27
Possible duplicate of Can I fetch the value of a non-standard CSS property via Javascript? — Banzay
– Banzay, Commented Dec 20, 2016 at 9:31
@AlexandruRada as you can se in my answer live snippet working properly — Christof
– Christof, Commented Dec 20, 2016 at 9:35
use a class like normal people do place your css in a css file — madalinivascu
– madalinivascu, Commented Dec 20, 2016 at 9:46

Christof · Accepted Answer · 2016-12-20 09:30:38Z

1

You can set whole style attribute manually

var style_text = '';
$.each(styleCSS, function(k,v) {style_text += k+':'+v+';';});
$('.container').find('.hide-me').attr('style', style_text);

styleCSS = {
    'display': 'none',
    'height' : '0px',
    'line-height' : '0px',
    'max-height' : '0px',
    'overflow' : 'hidden',
    'font-size': '0px',
    'mso-hide' : 'all',
    'width' : '0px',
    'max-width' : '0px'
};

var style_text = '';
$.each(styleCSS, function(k,v) {style_text += k+':'+v+';';});
$('.container').find('.hide-me').attr('style', style_text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="hide-me">foo</div>
  <div>bar</div>
</div>

edited Dec 20, 2016 at 9:30

answered Dec 20, 2016 at 9:25

Christof

2,7462 gold badges22 silver badges34 bronze badges

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

1 Comment

Alexandru R Over a year ago

used a variation of this. Didn't think about using style.

Rounin · Accepted Answer · 2016-12-20 09:47:21Z

0

What other solution will be to do this using jQuery?

An alternative approach would be to declare var styleCSS as a string variable (instead of an object) and then simply append an additional <style> element to the <head> of the document via jQuery:

$(document).ready(function(){

var styleCSS = '.hide-me {display: none; height: 0; line-height: 0; max-height: 0; overflow: hidden; font-size: 0; mso-hide: all; width: 0; max-width: 0;}';

$('head').append('<style>' + styleCSS + '</style>');

});

answered Dec 20, 2016 at 9:47

Rounin

29.9k13 gold badges102 silver badges126 bronze badges

Collectives™ on Stack Overflow

How to set non-standard css properties using Jquery?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related