使用 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 manipulatedfunction 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 自定义属性。

这个想法是在添加类时自定义属性--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>

Answer 2

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

            }

        }

    })

});

Answer 3

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