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

Question

我有 div，其变换属性正在被第 3 方 Js 应用程序更改，我想要的是根据其当前具有的变换属性在某些实例上修复变换属性。

为此，如果第 3 方应用程序对元素样式的任何更改无效，我需要在此处添加具有属性 transform: current_transform!important 和 !important 的类。

这里我创建了一个示例片段以便更好地解释

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

这只是举例而已，实际情况有所不同(关于变换属性和缩放)，但关键是动态更改类属性，以便第三方更改样式无效。

Answer 1

您可以使用CSS custom properties 。

这个想法是自定义属性 --last-p-width设置为元素的 width添加类时的属性值 zoom 。使其保持相同的值。

这篇文章有更多详细信息: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>