js改css代碼（js 修改css）

本文目錄一覽：

• 1、js怎麼修改css樣式
• 2、js如何更改css樣式，
• 3、如何用JS來改變CSS屬性？
• 4、如何用js實現，點擊後，改變一個css

js怎麼修改css樣式

js:

el.style.display = ‘value’  // el 為DOM元素，display為要設置的屬性（width，height，等，採用駝峰式命名法），value為想要設置的值

jQ

$(‘.class’).css(‘name’, ‘value’);

或者

$(‘.class’).css({

    name1: value1,

    name2: value2,

    ‘backgroud-color’: ‘red’

})

鍵值可以使用駝峰式命名法

js如何更改css樣式，

JS可以使用css屬性來進行樣式修改，並且不僅可以修改單一屬性，也可以同時修改多個屬性。

案例

以下小案例使用JQuery作為演示。

前提： html頁面首先必須引入JQuery，放置在body體最後的位置。例如：

script type=”text/javascript” src=””/script

html部分代碼

p

    我是一個段落，我沒有背景顏色的，但是JQuery會給我增加背景顏色。

/p

button

點擊我，給上面段落添加黃色背景顏色。

/button

JQuery代碼

 $(“button”).click(function(){

        $(“p”).css(“background-color”, “yellow”);

 });

修改多個屬性

$(“button”).click(function(){

        $(“p”).css({“background-color”: “yellow”, “font-size”: “200%”});

 });

結論與解釋：

首先使用Jquery選擇器進行元素選擇 – $(“button”)

為該元素綁定點擊事件 – click

click中的匿名函數修改css屬性。

在css屬性的修改中，p段落有了黃色背景； 多個屬性修改，不但有了黃色背景而且字體是之前的兩倍大小。

注意事項：

可以不用非要綁定事件，在本案例中，綁定事件是為了更好地演示Jquery如何操作css屬性。

修改單一屬性和多個屬性的寫法是有區別的，多個屬性使用{},屬性與值之間用：分割，屬性與屬性之間用，分割。

如何用JS來改變CSS屬性？

通過js來改變CSS屬性，使用jQuery可以很方便的實現，像這樣：

$(“img”).css(‘border-color’,’red’);

就可以把邊框顏色都變成紅色。

這是針對此問題的測試頁面

2、這是3張圖片

img src=’;fm=11gp=0.jpg’

img src=’;fm=11gp=0.jpg’

img src=’;fm=11gp=0.jpg’

3、這是圖片的樣式，邊框默認為灰色。

img{

max-width:200px;

border-color:gray;

border-width:10px;

border-style:solid;

}

4、現在通過這幾行用到jQuery的代碼，控制圖片邊框根據鼠標移入移出邊框變灰和變紅。

$(function(){

$(“img”).on(‘mouseover’,function(){

$(this).css(‘border-color’,’red’);

}).on(‘mouseout’,function(){

$(this).css(‘border-color’,’gray’);

});

});

5、效果如圖

如何用js實現，點擊後，改變一個css

方法步驟：

先獲取要改變css的元素。

改變這個元素的style屬性。

eg:下面是改變div的背景色,改為藍色。

style

div{width:200px;height:200px;background:#f00;}

/style

div改變背景色/div

script

var div = document.getElementsByTagName(“div”);

div.style.background = “blue”;

/script