使用JavaScript动态更改CSS类属性

Question

我有一个div，它的transform属性被第三方JS应用程序更改。我想要的是在某个实例下根据当前的transform属性修复transform属性。

为此，如果第三方应用程序对元素样式没有任何更改，则需要添加带有属性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>

这只是一个例子，实际情况与转换属性和缩放不同，但关键是动态更改类属性，以使第三方对样式的更改无效。

- Pankaj Sharma

---

它将改变元素样式，而这又如何帮助第三方应用程序？ - Pankaj Sharma

插入带有<style>标签的类会重复插入相同的类，我想要做的是操作类的属性而不是一遍又一遍地重新定义它。因为这个事件会发生很多次。 - Pankaj Sharma

如果您以那种方式编写代码，它将一遍又一遍地插入。您可以更改现有的代码或完全替换它。<style>标签可以像DOM中的任何其他元素一样进行选择。 - Taplar

https://jsfiddle.net/y6cj9eou/ 这是一个简单的示例，展示了这个概念。 - Taplar

我不完全确定我理解这个问题。层叠样式表，简称CSS，是层叠的。如果您想覆盖类的样式规则，请直接将样式规则应用于元素。CSS特异性。 - PoorlyWrittenCode

Answer 1

你可以使用 CSS自定义属性。

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

这篇文章更详细地介绍了这个方法: 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>

- Maurici Abad

Answer 2

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

- Pankaj Sharma

Answer 3

$("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... */
            }
        }
    })
});

- Sarah Sundar

---

这个能对我有什么帮助？ - Pankaj Sharma