如何使用 javascript 或 jquery 更改 html 元素的 css 属性

Question

我该如何改变 CSS 从 javascript.

我在用着 jQuery-ui Dialog 我想改变 a 的风格 DIV 来自 JavaScript。

谢谢

Answer 1

查核 jQuery的文档。如果你想什么它会在那里。

总之，如果你想样式添加到元素，你需要使用css功能，其中有几个变种。

$(selector).css(properties);  // option 1
$(selector).css(name, value); // option 2

所以，如果你有“mydiv”的ID的DIV和你想的红色背景，你会怎么办

$("div#mydiv").css({'background-color' : 'red'}); // option 1
$("div#mydiv").css('background-color','red');     // option 2

第一种方法是比较容易，如果你在一次设置多个的东西。

如果您要检查什么属性当前设置为，您会使用第二个选项的变体，只是省略值。

var color = $("div#mydiv").css('background-color');

将照亮如果已经设置在其上方，该变种color被red例如

您还可以添加和删除类，做这样的事情。

$(selector).addClass(class_name);
$(selector).removeClass(class_name);

Answer 2

这个答案的作品，即使没有jQuery的。的

所以，你有这样的事情：

<style type="text/css">
    .foo { color: Red; }
    .bar { color: Blue; }
</style>
<div class="foo" id="redtext"> some red text here </div>

如果你想改变只是一些属性，可以使用总能找到元素

var div = document.getElementById('redtext');

功能，然后通过

改变附颜色样式

div.style.color = 'Green';

让您红色文字显示为绿色，而不是。

如果你想改变的DIV定义为另一种风格类的类，你可以这样做：

div.className = 'bar';

使得DIV现在使用类吧，这让你以前的绿色文字蓝色。

Answer 3

有几种方法可以使用 jQuery 框架来操作元素样式。查看与 CSS 和更改属性相关的文档：

• http://docs.jquery.com/Attributes/addClass#class
• http://docs.jquery.com/CSS

Answer 4

尝试this.This是jquery的代码。

 $("myDiv").css({"color":"red","display":"block"})

如果您正在使用vanila javacript，试试这个。

var myDiv = document,getElementById("myDiv");

myDiv.style.display = "block";

myDiv.style.color = "red";