主页 / 问题 / 756704
Accepted
Алексей
Asked:2020-12-11 18:45:57 +0000 UTC2020-12-11 18:45:57 +0000 UTC

在jquery中更改css

  • 772

调整窗口大小时，元素的 css 属性不会改变。实际的js代码。如果你输入函数alert('произошло изменение')，那么它就可以工作。 

$(window).on('resize', formCss());

function formCss() {
  if($(window).width() > 839) { 
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px');
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 6');
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 6');
  } 
  if (($(window).width() > 479) && ($(window).width() < 840)) {
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px');
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 8');
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 8');
  } 
  if($(window).width() < 479) {
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px');
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 4');
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 4');
  }
}

`

javascript

2 个回答

  1. Best Answer

    我如何从这样一个事实开始，即在调用函数之前formCss，必须先声明它，然后再调用它。

    函数（像任何对象一样）必须 define在使用之前声明（定义）。

    好吧，在函数调用期间，$(window).on('resize', formCss);括号是不需要的。所以 - 一切似乎都有效。

    function formCss() {
  console.log('formCss');
  if ($(window).width() > 839) {
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px');
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 6');
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 6');
  }
  if (($(window).width() > 479) && ($(window).width() < 840)) {
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px');
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 8');
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 8');
  }
  if ($(window).width() < 479) {
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px');
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 4');
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 4');
  }
}

$(window).on('resize', formCss);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    这将很有用：

    • 1 

  2. $(window).on('resize', formCss);

function formCss() {
  if($(window).width() > 839) { 
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px');
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 6');
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 6');
  } 
  if (($(window).width() > 479) && ($(window).width() < 840)) {
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px');
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 8');
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 8');
  } 
  if($(window).width() < 479) {
    $('#otdel-kachestva .mdc-layout-grid').css('display', 'grid').css('grid-column-gap', '50px');
    $('#otdel-kachestva .name-client').parent().css('grid-column-end', 'span 4');
    $('#otdel-kachestva .number-house').parent().css('grid-column-end', 'span 4');
  }
}

    有帮助！

    • 0

相关问题