Javascript 和 css 语法，如何定义 'px'答案

【问题标题】：Javascript and css syntax , how to define the 'px'Javascript 和 css 语法，如何定义 'px'
【发布时间】：2020-08-24 04:48:00
【问题描述】：

我有一个非常简单的语法问题，我无法弄清楚。我有以下正确的代码行：

gridTemplateColumns: '100px 100px 100px',
height: Math.max(65, 200) + 'px',

现在我想在 gridTemplateColumns 的所有三个参数中添加 Math.max (x,x)：'100px 100px 100px。

以下是我尝试过的，但它们根本不正确：

gridTemplateColumns: Math.max(100, 50) Math.max(100, 50) Math.max(100, 50)+'px',
gridTemplateColumns: Math.max(100+'px', 50+'px') Math.max(100+'px', 50+'px') Math.max(100+'px', 50+'px'),

我也尝试在这里和那里使用一些花哨的 [] 和 {}，但我没有正确管理它们。感谢您的帮助。

【问题讨论】：

我能问一下您为什么使用带有常量值的Math.max 吗？ Math.max(65, 200) 永远不会产生除 200 以外的任何结果。
我的首选方式：[Math.max(100, 50), Math.max(100, 50), Math.max(100, 50)].map(n => n + 'px').join(' ')
我没有使用 Math.max(65,200)，我只是用它来简化问题。我正在使用这样的比例因子：Math.max(800, scale / 8)。现在它起作用了。我错过了这个：`$
您已经在使用+，但我怀疑您不知道它的含义。
欢迎来到stackoverflow @user13319165！如果您的帖子标题被问到诸如“如何使用 JavaScript 添加 3 个值并将它们设置为 CSS 值？”之类的问题，您可能会得到更多答案。此外，如果您是学习 CSS 或 JavaScript 的新手，请告诉我们，以便我们为您提供有用的资源。

标签： javascript css syntax

【解决方案1】：

你可以使用字符串插值语法

const obj = {
    gridTemplateColumns: `${Math.max(100, 50)}px ${Math.max(100, 50)}px ${Math.max(100, 
    50)}px` 
}

【讨论】：

【解决方案2】：

你好近啊！

一起去

gridTemplateColumns: Math.max(100, 50) + 'px ' + Math.max(100, 50) + 'px ' + Math.max(100, 50) + 'px'

你可能会从制作一个函数中受益：

function maxPx(a,b) {
 return Math.max(a,b) + 'px'
}

但是你需要确保不要忘记在值之间放置空格：

gridTemplateColumns: maxPx(100, 50) + ' ' + maxPx(100, 50) + ' ' + maxPx(100, 50)

或

gridTemplateColumns: [maxPx(100, 50), maxPx(100, 50), maxPx(100, 50)].join(' ')

【讨论】：