innerHTML类

Question

我正在使用一个javascript函数，它从<input type="text" />中获取一个值，然后将其写成文本，而不是输入。我使用innerHTML来做这件事，它工作得很好。

我的问题是:如何使用CSS类来编辑用innerHTML编写的文本的颜色和大小

var element = document.getElementById("element");
var value = document.getElementById("value").value;
element.innerHTML = value;

谢谢!

Answer 1

JavaScript：

element.className = 'foo';
// or
element.className += ' foo';

CSS：

.foo {
    color: #F00;
    font-size: 2em;
}

或更高级的：elem.classList.add( 'foo' ); (像往常一样，IE通过条件注释获取polyfill。)

-Šime Vidas

Answer 2

如果您的元素ID是"element“，只需添加以下css：

#element{
    color: #000000;
    font-size: 24px;
    font-family: sans-serif;
}

打乱这些值，直到它适合你。

Answer 3

使用JS，您可以直接操作css，而不需要额外的类(此外，您已经有了一个ID，您可以在...上使用样式)：

var el = document.getElementById("element");

你可以打电话给

el.style.<css-style> = ...;

css-style是一个css-声明。请注意，它们不是用连字符连接的，而是用CamelCase -> backgroundColor而不是background-color标记的。

Firebug可以在这方面为您提供内容帮助