使用JavaScript更改CSS

使用JavaScript更改CSS时，JavaScript是否只需制作带有总统的新内联CSS？我一直觉得内联CSS很垃圾，想知道是否有更好的方法？使用JavaScript更改CSS

例如，如果你有

<div id="author">Author's name</div>这是正常颜色为绿色，从外部CSS参考，并要将其变为红色必须在使用

document.getElementById('author').style.color='#FF0000'

必然选择更改外观做使用内联stying？

来源

2013-02-06 Celeritas

不，你不修改CSS。你只是设置style属性。元素的标记由三件事决定：CSS，style和内联属性，如width="100"。它们的应用顺序可能会有点模糊。

style确实总是推翻CSS，除非你使用!important。

更改元素标记的更常见方法是添加和删除类。这使您可以将所有样式定义保留在CSS文件中，并使代码大大简化。

你可以这样做：

document.getElementById('author').className = "selected";

一类添加到它，并让它在不同的标记显示。

如果您使用jQuery，您可以使用addClass和removeClass。在引擎盖下，这只是修改className属性。编写你自己的实现很简单，你只需要做一些字符串处理。

来源

2013-02-06 01:39:28 Halcyon

最后一段就是我正在寻找！ – Celeritas

它不再是最后一段，但，很酷:) – Halcyon

@Celeritas - 也问自己*为什么*它是绿色的，*为什么*它变成了红色，并根据这些原因挑选你的类名（class =“green” ）... ...你可以有'id =“author”class =“selected”'和规则说'＃author.selected {color：＃FF0000; }' –

有多种方法可以更改HTML元素的样式。如果使用jQuery的，举例来说，你可以添加/轻松去除类名的元素，像这样：

$("div").addClass("className");

来源

2013-02-06 01:41:46 BinaryTox1n

它始终是清洁的定义在类的所有样式，以便你可以改变整个应用程序的外观和感觉轻松而不是使用内联样式。

这样做最简单的方法是定义一个CSS类

.reddiv {color: #FF0000}

，那么你可以很容易的div颜色更改为红色使用jQuery

$('#author').addClass('reddiv');

来源

2013-02-06 01:53:08

回答

相关问题