dynamically change css class property with javascript

Question

I have div which transform property is getting changed by 3rd party Js application, what I want is to fix the transform property at some instance according to current transform property it have.

For that I need to add class with property transform: current_transform!important here with !important if any change in element style by 3rd party app will not be effective.

here I created a example snippet for better explanation

//let this is third party app which is changing the paragraph width and html which code can't be manipulated
function changeHeight(e) {
  var x = e.clientX;
  var y = e.clientY;
  $('p').html(y);
  $('p').css('width',x+"px");
}

// Here we need to write Js code so that any change in paragraph css will not be effective, if zoom is yes

$('[name="zoom"]').on('change',function(){
  if($(this).val()=='y'){
    // Here need to change to the .zoomed propery as widht: current_width!improtant so that paragraph width get fixed to lastly it have.
    
    $('p').addClass('zoomed');
  }
  else{
    $('p').removeClass('zoomed');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .zoomed{
    width: 50px!important;
  }
 </style>
<label>zoom yes</label>
<input type="radio" name="zoom" value="y" />
<label>zoom no</label>
<input type="radio" name="zoom" value="n" checked/>

<div style="height:70px;border:1px solid #000000;" onmousemove="changeHeight(event)">
</div>
<p style="background-color:red;"></p>

This is only for example only, real scenario is different(about transform property and zoom) but the key is to change the class property dynamically so that change in style by third party is not effective.

Answer 1

You can use CSS custom properties.

The idea is that the custom property --last-p-width is set to the element's width property value when you add the class zoom. Making it stay with the same value.

This post goes more into detail: https://css-tricks.com/updating-a-css-variable-with-javascript/

CSS

::root {
  --last-p-width: 50px;
}

.zoomed{
  width: var(--last-p-width) !important;
}

JS

$('[name="zoom"]').on('change',function() {
  if ($(this).val() === 'y') {
    $(":root").css("--last-p-width", $('p').css('width'));    // <-- HERE
    $('p').addClass('zoomed');
  }
  else {
    $('p').removeClass('zoomed');
  }
});

function changeHeight(e) {
  var x = e.clientX;
  var y = e.clientY;
  $('p').html(y);
  $('p').css('width',x+"px");
}

$('[name="zoom"]').on('change',function() {
  if ($(this).val() === 'y') {
    $(":root").css("--last-p-width", $('p').css('width'));    // <-- HERE
    $('p').addClass('zoomed');
  }
  else {
    $('p').removeClass('zoomed');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  ::root {
    --last-p-width: 50px;
  }
  
  .zoomed{
    width: var(--last-p-width) !important;
  }
 </style>
<label>zoom yes</label>
<input type="radio" name="zoom" value="y" />
<label>zoom no</label>
<input type="radio" name="zoom" value="n" checked/>

<div style="height:70px;border:1px solid #000000;" onmousemove="changeHeight(event)">
</div>
<p style="background-color:red;"></p>