如何用jQuery中的变量进行计算?

时间:2017-01-24 19:02:31

标签: jquery css

我正在创建一个程序,允许用户更改div的大多数CSS属性。我需要它居中,我通常这样做的方式是使用下面的CSS代码。

div {
  position: fixed;
  background: black;
  width: 100px;
  height: 100px;
  top: calc(50% - 50px);
  right: calc(50% - 50px);
}

我需要将宽度和高度作为自己的变量,然后对顶部和右侧属性进行计算,将它们除以2并从50%开始。

var width = 100;
var height = 100;
var top = (height / 2);
var right = (width / 2);

$('div')
  .css('position','fixed')
  .css('background','black')
  .css('width',width + 'px')
  .css('height',height + 'px')
  .css('top','calc(50% - ' + top + 'px)')
  .css('right','calc(50% - ' + right + 'px)');

如何在使用变量作为CSS属性的值时实现居中的div?

2 个答案:

答案 0 :(得分:2)

如果您不需要支持糟糕的IE CSS变量,那么这是一个选项。

<强> CSS

  1. 在样式表中选择范围。选择器在DOM上越高,它覆盖的越多。在摘录中,我选择了最高版本::root(即html)。
  2. 声明CSS变量::root --half: 50px CSSVar必须以2个破折号为前缀。在代码段中,我在--half上声明了:root,其值为50px
  3. 接下来,将CSSVar分配给适当的属性:
    • top: calc(50% - var(--half));
    • right: calc(50% - var(--half));
  4. <强>的JavaScript

    1. 详细信息在Snippet中进行了评论。
    2. <强>段

      &#13;
      &#13;
      // Reference the input
      var A = document.getElementById('input1');
      
      // On input event on input#A call setHalf() function
      A.addEventListener('input', setHalf, false);
      
      /* setHalf() accesses the CSS by the CSSDeclaration 
      || interface.
      */
      function setHalf(e) {
        // Reference the div
        var X = document.getElementById('shape1');
      
        /* Get div#shape1 computedStyle in order to 
        || access it's ruleset declarations.
        */
        var Y = window.getComputedStyle(X);
      
        // Get the value of the CSSVar --half
        var Z = Y.getPropertyValue('--half');
      
        // Set --half value to the value of input#A
        X.style.setProperty('--half', this.value + 'px');
      }
      &#13;
      :root {
        --half: 50px;
      }
      #shape1 {
        position: fixed;
        background: black;
        width: 100px;
        height: 100px;
        top: calc(50% - var(--half));
        right: calc(50% - var(--half));
        border: 1px solid black;
      }
      &#13;
      <div id='shape1'></div>
      <input id='input1' type='number' min='-150' max='150' value='50'>
      &#13;
      &#13;
      &#13;

答案 1 :(得分:0)

事实证明,我无法使用“top”或“right”这两个词作为变量名。

以下是最终正在运行的代码。

var width = 100;
var height = 100;
var test1 = width / 2;
var test2 = height / 2;

$('div')
  .css('position','fixed')
  .css('background','black')
  .css('width',width + 'px')
  .css('height',height + 'px')
  .css({'top':'calc(50% - ' + test1 + 'px)'})
  .css({'right':'calc(50% - ' + test2 + 'px)'});