将一个Javascript变量传递给CSS

我喜欢随着最佳实践倾向于保持我的代码分离。因此，我在Javascript以下问题一行代码：将一个Javascript变量传递给CSS

x[i].firstChild.innerHTML = remain;

这工作完全，但打破我在JavaScript编辑演示文稿的规则。我想改为将@remain传递给CSS，并向我引用的x[i]元素添加一个类。在该类中，内容将被更改，但我不确定如何在CSS中引用JS变量。

总之，如果在JS中，我做了一个变量x，我该如何在CSS中引用该值。

如果它很重要（可能不应该），所有语言都在不同的文件。

2016-09-20 Corey Ray Nalli

你可以改为@remain作为一个计算值，你放置在一个非常具体的元素。 KnockoutJS使HTML和JavaScript之间的这种连接变得容易得多，但仍然保持着两者之间的相当好的屏障。也就是说，通过采用ReactJS和JSX，JavaScript和HTML之间的障碍很快就会崩溃，所以只需考虑一下您为什么要保持它们分离的想法。 – k2snowman69

我明白事情可以改变，但现在无障碍是我平台的很大一部分。我的意思是，现在，每个拥有基本网页设计实践的人都可以非常轻松地遵循我的代码（尤其是雇主），这对我很有帮助。当我不需要任何人阅读我的代码时，可以采用更多的利基做法。但是你的评论确实给了我一些关于什么时候想方向的想法。 –

你的规则似乎有点武断，你不想从JS设置HTML内容，但你确实想从CSS引用一个JS变量。如果任何事情看起来更糟*，因为CSS只是设计内容的样式，而不是设置内容的文本。此外，从JS更新HTML元素的文本是非常正常的做法，所以我不会描述你试图避免的代码是有问题的。（你如何从CSS设置元素的文本？） – nnnnnn

如果你想少用CSS与JS试试这个

@percent: 1; 
    @height: `Math.round(screen.height * @{percent})`; 
    @width: `Math.round(screen.width * @{percent})`; 
    div.content { 
    margin: auto; 
    top: @height; 
    width: @width; 
    }

如果您打算使用JS，你可以试试这个：

var percent=1; 
document.querySelector('div.content').style.top = Math.round(screen.height * percent)+'px'; 
document.querySelector('div.content').style.width = Math.round(screen.width * percent)+'px';

如果婉使用jQuery你可以试试这

var percent=1; 
$("div.content").css('top', Math.round(screen.height * percent)+'px'); 
$("div.content").width(Math.round(screen.width * percent));

来源

2016-09-20 04:58:02

将一个Javascript变量传递给CSS

回答

相关问题