在Javascript和；CSS

我正在创建一个网站，里面有很多用javascript和CSS设计的动态内容。困扰我的是，我的维度常量（页面上事物的位置和大小）有一半在我的javascript中，而另一半在我的CSS中。有没有一个好方法可以为这样的常量设置一个“单一位置”

首先，我想我可以使用一个CSS生成器，比如LessCss或SASS，但是在这些生成器的文档中，我也看不到从另一个javascript文件访问声明常量的方法。有谁能给我指出一个处理这个问题的清晰、惯用的方法吗

谢谢你的帮助

编辑：

为了澄清我的问题是什么：我的页面的一部分由一个高度专业化的电子表格组件组成，我从零开始用javascript构建该组件，并在画布元素中运行。我有很多与这个组件相关的布局常量，比如cell_width、cell_height等，它们不是标准的CSS属性。我的网站的其他组件更为典型，并且是由CSS设计的。我想知道的是，是否有一种可接受的方法来维护一个地方，将CSS和Javascript样式常量保存在一个地方。这可以通过某种方式在CSS中维护“自定义”属性来实现，这些属性只能通过javascript读取。或者，如果LessCss或SASS能够在呈现之前通过我自己的javascript设置变量，那也可以。然而，我在网上找不到关于这两个主题的任何信息。

有Chuusha：

另见：

有没有一个好方法可以为这样的常量设置一个“单一位置”

样式表

然后动态设置类名

---

（至少在很多情况下。我们不知道您的问题的具体情况）

考虑重新设计为什么这些常量的一半在JS中，而另一半在CSS中

---

试着运用原则和原则。问问自己是否尊重行为（JavaScript）和表示（CSS）之间存在的差异。

如果需要常量变量，请使用JS的“document.var=X

这将保留全局存储的所有变量

即

document.eleX=12； document.PositionTopofDiv3=234

如果“常量”对应于某个可以从元素中准备好的参数，那么在javascript启动时可以读取该元素。例如，如果您关心的是可以使用id=“foo”的某个元素的宽度（假设jquery）

或

但是对于更复杂的全局变量集，我已经开始使用一种技巧，将东西作为字符串嵌入到隐藏div的background image属性中。这很有效，因为你可以在背景图像字符串中放入任何东西。然后在javascript启动中，我可以从div上的背景图像中读取该字符串，并将其解码为javascript

例如，我有一个带有这些“常量”的.less文件

在这个.less文件中，我将这些用于这个div

#css-shared-globals {
  background-image: url("about:$$$({hideChatTime:@{hide-chat-time},hideFinalWidth:@{hide-final-width}})$$$");
  display:none;
}

在相关的.html文件中有一个无用的div：

<div id="css-shared-globals" style="display:none;"></div>

整个混乱的结果是，我的.less（或.css）和.js文件看到了相同的常量，我只需要在一个地方（less或css文件）更改它们。这很混乱，但到目前为止，它仍然有效。

一个有趣的想法是，在css中使用css变量，但使用javascript设置它们。因此，CSS接受JS赋予它们的值

乙二醇

还有js

anyelement.style.setproperty('--var', 'red);

---

css变量被设置为JS常量。但这实际上是用于更改变量，而不是预处理常量值。

你可能是对的-我可能应该为我的问题选择最佳答案，即使这些问题没有一个是完全正确的。对于所有问“为什么”的人，我回答：在画布上使用相同的颜色。我同意也许我可以在这方面考虑一下，虽然有时布局问题只能用javascript来解决，但我的辩护是，我专门提出这个问题是为了找出最好的分离关注点的方法-常量在我的JS中，因为我有一些情况下我无法找出如何将它们放入CSS中，因此我提出了这个问题。是的，这正是我所需要的，但我没有指定我正在寻找客户端解决方案（我不好，因为我没有具体说明。我同意这是最好的方法，只要可能-我会考虑是否可以在我的案例中更专注地应用它。@user380572-作为回应，这是尊重关注点分离的一个很好的方法。我个人认为这个答案应该有绿色勾号。对，但我不能在CSS中使用该变量。（除非有一种方法可以使用我没有见过的lesscs或SASS）好吧，保持标准；保持css值正常，并使用这些全局变量通过javascript进行修改。但是，是的，另一种选择是从头开始重新设计，干净。

#css-shared-globals {
  background-image: url("about:$$$({hideChatTime:@{hide-chat-time},hideFinalWidth:@{hide-final-width}})$$$");
  display:none;
}

<div id="css-shared-globals" style="display:none;"></div>

// load globals from chat.less
var el = $('#css-shared-globals');
var elObj = eval(decodeURI(el.css('background-image').split('$$$')[1]));
hide_time = elObj.hideChatTime;
hide_final_width = elObj.hideFinalWidth;

:root { --var: blue; }
.myclass { colour: var(--var); }

anyelement.style.setproperty('--var', 'red);