问使用javascript动态更改css类属性

EN

//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

      let styleOverride = document.querySelector('#styleOverride');
  
  if (!styleOverride) {
  	styleOverride = document.createElement('style');
    styleOverride.id = 'styleOverride';
    document.body.appendChild(styleOverride);
  }
     styleOverride.innerHTML = '';
$('[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.
    let wid= $('p').css('width')+"!important";
    styleOverride.innerHTML = `
	.zoomed{
    	width: ${wid};
    }
  `;
    $('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>

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

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

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

$("body").mousemove(function(e) {
        window.mx = e.pageX;
        window.my = e.pageY;
        if (window.dragging) {
            // Calculate drag distance difference
            let diffX =
    window.drag_width =
parseInt((window.item_width + (window.mx - window.drag_x) * 1.75));
            let diffY =
   window.drag_height =
parseInt((window.item_height + (window.my - window.drag_y) * 1.75));
            // Absolute values ensure the item dimensions
            // never become negative
            $(window.dragging_target).css("width",
                Math.abs(diffX) + 'px');
            $(window.dragging_target).css("height",
                Math.abs(diffY) + 'px');
            $(window.dragging_target).css("lineHeight",
                Math.abs(diffY) + 'px');
            // Change cursor to either left-right or up-down arrow,
            // based on which direction the drag is the greatest
            if (diffX > diffY) {
                /* Optional, maybe a future feature... */
            }
        }
    })
});