如何将样式属性作为路由存储在变量中？

Question

我无法将元素的样式存储在变量中并将其用作路由：

let store = element.style.height;

store = 100px;

我试图通过创建一个限制输入最大值的常量来减少我的代码，如下所示：

const limitMaxVal = (whatToLimit, whatToStyle) => {
    let maxVal = parseFloat(whatToLimit.max);
    let minVal = parseFloat(whatToLimit.min);

    if (whatToLimit.value >= maxVal) {
        whatToLimit.value = maxVal;
        whatToStyle = maxVal / 10 + "%";
    } else if (whatToLimit.value <= minVal) {
        whatToStyle = minVal / 10 + "%";
    } else {
        whatToStyle = whatToLimit.value / 10 + "%";
    }
}

常量有两个变量。 whatToLimit 是我限制的输入，whatToStyle 是输入的样式。在这种情况下，我正在设计 canvas 的高度，但我想对宽度、背景颜色使用相同的常量……这让我想到了我的问题：我找不到存储的方法元素的样式作为路由。如果我像下面这样存储它，我将获得高度值：

inputHeight.oninput = function() {
    limitMaxVal(this, canvas.style.height);
};

另一个使用相同常量的例子是：

inputWidth.oninput = function() {
    limitMaxVal(this, canvas.style.width);
};

我也试过使用 eval() 但它也不起作用:

const limitMaxVal = (whatToLimit, whatToStyle) => {
    let maxVal = parseFloat(whatToLimit.max);
    let minVal = parseFloat(whatToLimit.min);

    if (whatToLimit.value >= maxVal) {
        whatToLimit.value = maxVal;
        eval(whatToStyle) = maxVal / 10 + "%";
    } else if (whatToLimit.value <= minVal) {
        eval(whatToStyle) = minVal / 10 + "%";
    } else {
        eval(whatToStyle) = whatToLimit.value / 10 + "%";
    }
    
    this.focus();
}


inputHeight.oninput = function() {
    let store = "canvas.style.height";
    limitMaxVal(this, store);
};

Answer 1

使用您的代码，传递到 limitMaxVal 函数的是样式属性的 value，而不是 reference ，而函数需要知道哪里可以分配新值，而不是 what 当前值是什么。阅读 Pass variables by reference in JavaScript 中的答案以了解更多信息。

使用您自己的代码进行说明：

// This creates a variable with name `store` and value '200px',
// assuming that `element.style.height` is '200px'
let store = element.style.height;

// This changes the value of `store` to '100px',
// nothing happened to `element.style.height`
store = 100px;

// At the end, `store` is '100px',
// `element.style.height` remains '200px'

根据你在那里写的内容，我建议将样式对象和属性名称传递给函数，如下所示：

const limitMaxVal = (whatToLimit, styleObj,  propertyName) => {
    let maxVal = parseFloat(whatToLimit.max);
    let minVal = parseFloat(whatToLimit.min);

    if (whatToLimit.value >= maxVal) {
        whatToLimit.value = maxVal;
        styleObj[propertyName] = maxVal / 10 + "%";
    } else if (whatToLimit.value <= minVal) {
        styleObj[propertyName] = minVal / 10 + "%";
    } else {
        styleObj[propertyName] = whatToLimit.value / 10 + "%";
    }
}

下面是使用方法：

inputHeight.oninput = function() {
    limitMaxVal(this, canvas.style, 'height');
};

Answer 2

@Kelvin 已经成功了 - 荣誉！

不过，我试了一下，想出了这种替代方法。此处您将 whatToStyle 对象和属性指定为字符串。但是，它要求目标对象在全局名称中 space (window).

请注意：最小和最大限制现在使用 Math.min() 和 Math.max() 在单个表达式中完成。

const canvas=document.getElementById("canvas"),
      inp=   document.getElementById("inp");

function limitMaxVal(whatToStyle){
  return function(ev){
    let inp=ev.target
    let wts=whatToStyle.split('.'), ob=window[wts.shift()];
    while (wts.length>1) ob=ob[wts.shift()];
    ob[wts[0]]=Math.min(Math.max(inp.value,inp.min),inp.max)+'%'
  }
}

// this is how you apply it on an input element:
inp.oninput=limitMaxVal("canvas.style.height");

#main {height:150px; width:300px}
#canvas {height:15%; width:300px; background-color:blue}

<input id="inp" type="number" value="15" max="100" min="10"><br>
<div id="main"> <div id="canvas"></div> </div>

如何将样式属性作为路由存储在变量中？

How to store a style property in a variable as the route?

javascript

constants

如何将样式 属性 作为路由存储在变量中？

How to store a style property in a variable as the route?

javascript

constants

如何将样式属性作为路由存储在变量中？