如何使用javascript或jQuery更改html元素的CSS屬性

Question

如何從javascript更改CSS 。

我正在使用jQuery-ui Dialog並且想從javascript更改DIV的樣式。

謝謝

Answer 1

查閱jQuery文檔。 如果您想要任何東西，它將在那里。

無論如何，如果要向元素添加樣式，則需要使用css函數，該函數具有一些變體。

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

因此，如果您有一個ID為“ mydiv”的DIV，並且要將背景設置為紅色，則可以

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

如果您一次設置多個內容，第一種方法會更容易。

如果要檢查當前設置為什么屬性，則可以使用2nd選項的變體，只需忽略該值即可。

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

例如，如果您已經在上方進行設置，則將var 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和更改屬性有關的文檔：

Answer 4

試試這個。這是jQuery代碼。

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

如果您正在使用vanila javacript，請嘗試此操作。

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

myDiv.style.display = "block";

myDiv.style.color = "red";